recursal/MDN huggingface dataset:
Prototype-based programming
===========================

**La programación basada en prototipos** es un estilo de programación orientada a objetos en el que las 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.

En palabras simples: este tipo de estilo permite la creación de un objeto sin definir primero su clase.

Aprender más
------------

### Conocimiento general

* Prototype-based programming on Wikipedia
Constante
=========

Una constante es un valor que el programador no puede cambiar, por ejemplo números (1, 2, 42). Con variables, por otra parte, el programador puede asignar un nuevo valor a una variable cuyo nombre ya esté en uso.

Al igual que las variables, algunas constantes están unidas a identificadores. Por ejemplo, el identificador `pi` podría estar vinculado al valor 3.14... .

Saber más
---------

### Conocimientos generales

* Constante en Wikipedia
Árbol de accesibilidad (AOM)
============================

El **árbol de accesibilidad** o **modelo de objeto de accesibillidad (AOM)**, contiene información relacionada con accessibility para la mayoría de los elementos HTML.

Los navegadores convierten el lenguaje markup en una representación interna denominada *DOM tree* (á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.

Hay cuatro elementos en un árbol de objeto de accesibilidad:

**nombre**

¿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 Accessible Name and Description Computation spec).

**descripción**

¿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.

**rol**

¿Qué tipo de elemento es? Por ejemplo, es un botón, una barra de navegación o una lista de elementos?

**estado**

¿Tiene un estado? Piensa en marcado/desmarcado para las casillas de verificación o en desplegado/oculto para los elementos `<summary>` (en-US) (resumen).

Además, el árbol de accesibilidad usualmente contiene información sobre lo que se puede hacer con un elemento: *seguir* un enlace, *completar* un cuadro de texto, etc.

Véase también
-------------

* Glosario de MDN Web Docs
    + Accessibility
    + ARIA
WebKit
======

*WebKit* es un *framework* (marco o interfaz) que proporciona páginas web "bien formadas" basadas es su lenguaje de marcado. El principal navegador que utiliza este framework es Safari, aunque también lo hacen muchos otros navegadores web para dispositivos móviles (debido a que WebKit es muy portable y customizable).

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).

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 LGPL: la libería de renderizado HTML de **WebCore** y el motor **JavaScriptCore**.

Para saber más
--------------

### Cultura General

* WebKit en Wikipedia
### Referencia técnica

* WebKit CSS extensions (en-US)
Object
======

El Object 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. JavaScript, Java, C++, y Python son ejemplos de programación orientada a objetos.

Aprender más
------------

* `Object` en la Referencia de JavaScript
* Estructura de datos Object en JavaScript
Constructor
===========

Un **constructor** pertenece a una clase objeto (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 (object-oriented programming). En esencia, un constructor en JavaScript suele ser declarado al comienzo de una instancia de una clase (class).

Sintaxis
--------


```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){
}
```


Para llamar al constructor de una clase en Javascript, use el operador `new` para asignar un objeto de referencia (object reference (en-US)) a una variable.


```js
function Default() {}

// A new reference of a Default object assigned to a
// local variable defaultReference
var defaultReference = new Default();
```

Saber más
---------

### Conocimiento general

* Constructor en Wikipedia
### Referencia técnica

* El constructor en programación orientada a objetos para JavaScript en MDN
* Operador new en JavaScript en MDN
Mejora Progresiva
=================

**Mejora progresiva** 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.

La detección de características (en-US) se usa generalmente para determinar si los navegadores pueden manejar todo el contenido de alto nivel o no. Habitualmente se usan los polyfills para incorporar las características faltantes con JavaScript.

Se debe prestar especial atención a la accesibilidad, siempre que sea posible, se deben proporcionar alternativas aceptables.

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. Graceful degradation (en-US) 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í.

Learn more
----------

### Conocimientos generales

* Mejora progresiva en Wikipedia
Dirección IP
============

Una dirección IP es un número asignado a cada dispositivo conectado a una red que utiliza el protocolo de Internet.

La «dirección IP» normalmente se sigue refiriendo a las direcciones IPv4 de 32 bits hasta que el IPv6 se despliegue más ampliamente.

Aprenda más
-----------

### Conocimiento general

* Dirección IP en Wikipedia
Head
====

La cabecera (en inglés *Head*) es la parte de un documento HTML que contiene metadatos sobre ese documento, como el autor, la descripción y los enlaces a los archivos CSS o JavaScript que se deben aplicar al documento HTML. Es la parte del documento web que no es visible al usuario.

Aprenda más
-----------

### Elemento head de HTML

* Rreferencia al elemento <head> en MDN
* El elemento <head> de HTML en la zona de aprendizaje de MDN
GIF
===

**GIF** (**G**raphics **I**nterchange **F**ormat en español **Formato de Intercambio de Gráficos**) 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.

Aprender más
------------

### Conocimientos generales

* GIF en Wikipedia
Scope
=====

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.

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:


```js
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
```


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:


```js
var x = "función externa declarada";

exampleFunction();

function exampleFunction() {
  console.log("funcion interna");
  console.log(x);
}

console.log("funcion externa");
console.log(x);
```

Aprende mas
-----------

### Conocimentos Generales

* Scope (computer science) on Wikipedia
Cabecera de respuesta
=====================

Una **cabecera de respuesta** (en inglés *response header*) es una HTTP header (en-US) que puede ser usada en una respuesta HTTP y que no tiene que ver con el contenido del mensaje. Las cabeceras de respuesta, como `Age`, `Location` (en-US) o `Server` son usadas para dar un contexto más detallado de la respuesta.

No todas las cabeceras que aparecen en una respuesta son categorizada como *cabeceras de respuesta* por la especificación. Por ejemplo, la cabecera `Content-Type` es una representation header (en-US) indicando el tipo original de datos en el cuerpo del mensaje de respuesta (previo a que la codificación en la cabecera de representación `Content-Encoding` sea aplicada). Sin embargo, en un mensaje de respuesta, "conversacionalmente" todas las cabeceras son usualmente llamadas como cabeceras de respuesta.

A continuación se muestra algunas cabeceras de respuesta y representación luego de una petición `GET`.
```

200 OK
Access-Control-Allow-Origin: *
Connection: Keep-Alive
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Date: Mon, 18 Jul 2016 16:06:00 GMT
Etag: "c561c68d0ba92bbeb8b0f612a9199f722e3a621a"
Keep-Alive: timeout=5, max=997
Last-Modified: Mon, 18 Jul 2016 02:36:04 GMT
Server: Apache
Set-Cookie: mykey=myvalue; expires=Mon, 17-Jul-2017 16:06:00 GMT; Max-Age=31449600; Path=/; secure
Transfer-Encoding: chunked
Vary: Cookie, Accept-Encoding
X-Backend-Server: developer2.webapp.scl3.mozilla.com
X-Cache-Info: not cacheable; meta data too large
X-kuma-revision: 1085259
x-frame-options: DENY
```

Véase también
-------------

* Listado de cabeceras HTTP
* Glosario
    + Representation header (en-US)
    + HTTP header (en-US)
    + Fetch metadata response header
    + Request header (en-US)
Apple Safari
============

Safari es un navegador web desarrollado por Apple y ligado a Mac OS X y iOS. Está basado en el motor de código abierto WebKit.

Saber más
---------

### Conocimiento general

* Safari en Wikipedia
* Safari en apple.com
### Información técnica

* El proyecto WebKit
* WebKit versión diaria (nightly build)
* Reporta un error en Safari
Ruby
====

**Ruby** es un lenguaje de programación de código abierto. En el contexto Web, Ruby se suele usar en el lado del servidor con el framework **Ruby On Rails** (ROR) para producir sitios web y aplicaciones.

Ruby también es un método para anotar texto de Asia oriental en documentos HTML para proporcionar información de pronunciación; consulte el elemento `<ruby>` (en-US).

Véase también
-------------

* Ruby en Wikipedia
* Sitio web oficial de Ruby
* Sitio web oficial de Ruby On Rails
Optimizar sus páginas para análisis especulativo
================================================

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 </script> 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.

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.

Haciendo cargas especulativas exitosas
--------------------------------------

Hay solo una regla para hacer cargas especulativas exitosas en scripts enlazados, hojas de estilo e imagenes:

* Si usted usa el elemento <base> 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().
Evitando perder la salida del generador de arbol
------------------------------------------------

La generación de árbol especulativo falla cuando `document.write()` cambia el estado del generador de árbol de tal manera que el estado especulativo después del tag `</script>` no se mantiene cuando todo el contenido es inertado por `document.write()` ha sido analizado. Sin embargo, sólo usos inusuales de `document.write()` causa problemas. Aquí están las cosas a evitar:

* No escriba árboles desbalanceados. `<script>document.write("<div>");</script>` está mal. `<script>document.write("<div></div>");</script>` es correcto.
* No escriba un token sin finalizar. `<script>document.write("<div></div");</script>` esta mal.
* No termine con un carater de retorno de carro. `<script>document.write("Hello World!\r");</script>` está mal. `<script>document.write("Hello World!\n");</script>` es correcto.
* Note que escribiendo etiquetas balanceadas pueden causarse que se creen otras etiquetas desbalanceadas. Ej. `<script>document.write("<div></div>");</script>` dentro del elemento `head` será interpretado como `<script>document.write("</head><body><div></div>");</script>` el cual está desbalanceado.
* No formatee parte de una tabla. `<table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table>` está mal. Sin embargo, `<script>document.write("<table><tr><td>Hello World!</td></tr></table>");</script>` está correcto.
* HAGA: document.write dentro de otro elemento de formateo.
Pila de llamadas
================

Una **pila de llamadas** 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 funciones, qué función se esta ejecutando actualmente y qué funciones son llamadas desde esa función, etc.

* 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.
* 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.
* Cuando la función actual termina, el intérprete la elimina de la pila y reanuda la ejecución donde se quedó.
* Si la pila necesita más espacio del que se le asignó, se producirá un error de "desbordamiento de pila".
Ejemplo
-------


```js
function saludar() {
  // [1] Código
  diHola();
  // [2] Código
}
function diHola() {
  return "!Hola!";
}

// Invocar la función `saludar`
saludar();

// [3] Código
```


El código del ejemplo se ejecutaría de la siguiente manera:

1. Ignora todas las funciones hasta que alcanza la invocación de la función `saludar()`.
2. Añade la función `saludar()` a la lista de la pila de llamadas.


**Nota:** Lista de la pila de llamadas:
 - saludar
3. Ejecuta todas las líneas de código de dentro de la función `saludar()`.
4. Llega a la incovación de la función `diHola()`.
5. Añade la función `diHola()` a la lista de la pila de llamadas.


**Nota:** Lista de la pila de llamadas:
 - saludar
 - diHola
6. Ejecuta todas las líneas de código de dentro de la función `diHola()` hasta que llega al final.
7. Devuelve la ejecución a la línea que invocó a la función `diHola()` y continua con la ejecuación del resto de código de la función `saludar()`.
8. Elimina la función `diHola()` de la lista de la pila de llamadas.


**Nota:** Lista de la pila de llamadas:
 - saludar
9. Cuando todo el código dentro de la función `saludar()` ha sido ejecutado, vuelve a la línea que la invocó y continua ejecutando el resto de código JavaScript.
10. Elimina la función `saludar()` de la lista de la pila de llamadas.


**Nota:** Lista de la pila de llamadas:
 VACÍA

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.

Véase también
-------------

* Glosario de MDN Web Docs
    + Función
SVN
===

Apache Subversion (**SVN**) es un sistema (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.

Saber más
---------

### Conocimientos generales

* Apache Subversion en Wikipedia
* Sitio web oficial
### Véase tambiém

* Guía SVN para localizadores en MDN
Cross-site scripting
====================

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íctimas y permite a los atacante eludir los controles de acceso y hacerse pasar por usuarios. Según el Open Web Application Security Project, XSS fue la séptima vulnerabilidad más común de las aplicaciones web en 2017.

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 HTML.

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.

El contenido malicioso a menudo incluye 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.

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.

**XSS Almacenados**

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.

**XSS Reflejados**

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.

**XSS basados en DOM**

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.

Saber más
---------

### Conocimientos generales

* Cross-site scripting on Wikipedia
* Cross-site scripting on OWASP
* Another article about Cross-site scripting
* XSS Attack – Exploit & Protection
Grid
====

*CSS grid* es definido usando el valor grid en la propiedad `display`; puedes definir columnas y filas en tu diseño grid, con las propiedades `grid-template-rows` y `grid-template-columns` .

El grid que configures usando estas propiedades es definido como la grilla explícita (*explicit grid*).

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 tracks (en-US) de filas o columnas adicionales para contener grid items, luego se crearán pistas adicionales en la cuadrícula implícita. La *cuadrícula implícita* es la cuadrícula creada automáticamente debido al contenido que se agrega fuera de las pistas definidas.

En el siguiente ejemplo, he creado una *grilla explícita* de tres columnas y dos filas. La *tercera* fila en la cuadrícula es una pista de la fila de la *grilla implícita*, formada debido a que son más de seis los elementos que llenan las pistas explícitas.

Ejemplo
-------
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```



```css
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}
```



```html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
</div>
```

Aprende Más
-----------

### Referencia de propiedades

* `grid-template-columns`
* `grid-template-rows`
* `grid`
* `grid-template` (en-US)
### Otras lecturas

* Guía de diseño CSS Grid: *Conceptos Básicos de Grid Layout*
Codificación de caracteres
==========================

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.

Por ejemplo, en HTML normalmente especificamos que la codificiación va a ser UTF-8 con la siguiente linea:


```html
<meta charset="utf-8" />
```


Con esto te aseguras de que usando caracteres propios de cualquier lenguaje humano en tu documento HTML, se mostrarán de forma legible.

Saber más
---------

### Conocimientos generales

* Character encoding on W3C
* Codificación de caracteres en Wikipedia
Reflow
======

**Un Reflow** sucede cuando un navegador debe procesar y pintar parte de, o toda una pagina web nuevamente, Como despues de actualizar un sitio web interactivo

Aprende más
-----------

* Artículo de google "Minimizing browser reflow"