recursal/MDN huggingface dataset:
Understanding client-side web development tools
===============================================

Las herramientas del lado del cliente (*client-side* 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 *client-side*, 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

**Inicia ahora con nuestra "Introducción a las herraminetas *client-side*" (en-US)**

Requisitos previos
------------------

Debes aprender el núcleo básico de los lenguajes HTML, CSS y JavaScript, antes de intentar usar las herramientas aquí descritas.

### ¿Quieres convertirte en un desarrollador front-end?

Tenemos un curso que incluye toda la información esencial que necesitas para lograr tu objetivo.

Inicia ahora

Guías
-----

1. Introducción a las herramientas *client-side* (en-US)

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.

2. Introducción a la linea de comandos (en-US)

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 (*command line interface* - CLI en inglés).

3. Introducción al manejo de paquetes (en-US)

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.

4. Introduciendo una cadena de herramientas completa (en-US)

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.

5. Desplegando nuestra aplicación (en-US)

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.
Prueba tus habilidades: controles HTML5
=======================================

El objetivo de esta prueba es evaluar si has comprendido nuestro artículo Los tipos de entrada de HTML5.

**Nota:** 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 CodePen, jsFiddle, o Glitch para trabajar en las tareas.

Si tienes problemas, pide ayuda — mira la sección Evaluación o ayuda adicional al final de esta página.

Controles HTML5 1
-----------------

Primero exploraremos algunos de los tipos nuevos de `input` en HTML5. Crea las etiquetas `input` apropiadas para que un usuario actualice sus detalles para:

1. Correo electrónico
2. Sitio web
3. Número de teléfono
4. Color favorito

Intenta actualizar el código en vivo más abajo para retrear el ejemplo terminado:

**Nota:** Descarga el código inicial de esta tarea para trabajar en tu propio editor o en un editor en línea.

Controles HTML5 2
-----------------

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.

1. Implemente un control deslizante básico que acompañe a la etiqueta provista.
2. Establezca un valor minimo de 1, uno máximo de 30 y un valor inicial de 10.
3. 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.

Intenta actualizar el código en vivo más abajo para retrear el ejemplo terminado:

**Nota:** Descarga el código inicial de esta tarea para trabajar en tu propio editor o en un editor en línea.

Evaluación o ayuda adicional
----------------------------

Puedes practicar estos ejemplos en los editores interactivos que se encuentran más arriba.

Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:

1. Pon tu trabajo en un editor en línea con capacidad de compartir como CodePen, jsFiddle, o Glitch. Puedes escribir el código por ti mismo, o usar los archivos de punto de inicio enlazados en las secciones superiores.
2. Escribe una publicación solicitando evaluacion y/o ayuda en el MDN Discourse forum Categoría de aprendizaje. Tu publicación debería incluir:
    * Un título descriptivo como "Solicito evaluacion para la prueba de habilidad de controles HTML5 1".
    * 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.
    * 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.
    * Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.
Primeros pasos en CSS
=====================

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.

Prerrequisitos
--------------

Antes de comenzar este módulo, deberías:

1. Estar familiarizado y tener conocimiento básico sobre el uso de computadores e internet básico (p.ej. navegando, consumiendo contenido en Internet.)
2. Un entorno básico de trabajo configurado, como se detalla en la sección de Instalación de software básico, y saber como crear y administrar archivos, o lo puedes ver en el módulo Manejando los archivos.
3. Conocimiento básico de HTML, como se muestra en Introducción a HTML.

**Nota:** 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 JSBin o Glitch.

Guías
-----

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.

¿Qué es CSS?

**CSS** (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.

Empezar con CSS

En este artículo se tomarná un documento HTML simple y se le aplicará CSS, aprendiendo algunas cosas prácticas mientras lo haces.

Como se estructura CSS

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.

Como trabaja CSS

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.

Usando tu nuevo conocimiento

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.

Ver también
-----------

Usa tu nuevo conocimiento

Con lo que has aprendido en los últimos artículos, deberías descubrir que puede formatear documentos de texto simples usando CSS para agregarles su propio estilo. Esta evaluación te da la oportunidad de hacerlo.
Estilo de texto
===============

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.

Requisitos previos
------------------

Antes de iniciar este módulo, ya debe estár familizarizado con HTML, como se explica en el módulo Introducción a HTML, y sentirse cómodo con los fundamentos de CSS, como se explica en Introducción a CSS.

**Nota:** 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 JSBin, CodePen o Glitch.

Guías
-----

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.

Texto fundamental y estilo de fuente

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.

Estilos de listas

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.

Estilos de enlaces

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.

Fuentes web

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.

Evaluaciones
------------

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.

Escribiendo una página de inicio para la comunidad de la escuela

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.
Usa CSS para resolver problemas comunes
=======================================

Los siguientes enlaces apuntan a soluciones comunes a los problemas cotidianos que necesitará resolver con CSS.

Casos de uso común
------------------

### Básicos

* Cómo aplicar CSS al HTML
* How to use whitespace in CSS
* Cómo escribir comentarios en CSS
* Cómo seleccionar elementos mediante nombre del elemento, clase o ID
* Cómo seleccionar elementos mediante nombre del atributo y contenido
* Cómo usar pseudo-clases
* Cómo usar pseudo-elementos
* Cómo aplicar múltiples selectores a la misma regla
* Cómo especificar colores en CSS
* Cómo depurar CSS en el navegador
### CSS y texto

* Cómo dar estilo al texto
* Cómo personalizar una lista de elementos
* Cómo dar estilo a links
* Cómo agregar sombras al texto
### Cajas y diseños

* Cómo redimensionar cajas CSS
* Cómo controlar el contenido que desborda
* Cómo controlar la parte de una caja CSS en la que se dibuja el fondo
* Cómo defino un elemento inline, block o inline-block?
* Cómo crear cajas elegantes (en-US) (ver también el módulo Cajas de estilo, en general).
* Cómo usar `background-clip` para controlar qué parte del cuadro cubre la imagen de fondo.
* Cómo cambiar completamente el modelo de la caja usando `box-sizing`
* Cómo controlar los fondos
* Cómo controlar los bordes
* Cómo diseñar una tabla HTML
* Cómo agregar sombras a las cajas
Técnicas poco comunes o avanzadas
---------------------------------

Más allá de lo básico, CSS permite técnicas de diseño muy avanzadas. Estos artículos lo ayudan a abordar los casos de uso más difíciles que puede enfrentar.

### General

* Cómo calcular la especificidad de un selector CSS
* Cómo controlar la herencia en CSS
### Efectos avanzados

* Cómo usar filtros en CSS
* Cómo usar los modos de fusión en CSS
### Diseño

* Usar cajas flexibles en CSS (en-US)
* Uso de diseños de varias columnas en CSS (en-US)
Uso de contenido generado por CSS
=================================

Este artículo describe algunas formas en las que puedes usar CSS para agregar contenido cuando se muestra un documento. Modificas tu hoja de estilo para agregar contenido de texto o imágenes.

Una de las ventajas importantes de CSS es que te 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. Puede especificar contenido de texto o imagen dentro de una hoja de estilo cuando ese contenido está estrechamente vinculado a la estructura del documento.

**Nota:** El contenido especificado en una hoja de estilo no se convierte en parte del DOM.

Especificar contenido en una hoja de estilo puede causar complicaciones. Por ejemplo, puede tener diferentes versiones de idioma de su documento que comparte una hoja de estilo. Si especifica contenido en su hoja de estilo que requiere traducción, debe colocar esas partes de su hoja de estilo en diferentes archivos y hacer arreglos para que se vinculen con las versiones de idioma apropiadas de su documento.

Este problema no surge si el contenido que especifica consiste en símbolos o imágenes que se aplican en todos los idiomas y culturas.

Ejemplos
--------

### Contenido de texto

CSS puede insertar contenido de texto antes o después de un elemento. Para especificar esto, cree una regla y agregue `::before` o `::after` al selector. En la declaración, especifique la propiedad `content` con el contenido del texto como su valor.

#### HTML


```html
Un texto donde necesito <span class="ref">algo</span>
```


#### CSS


```css
.ref::before {
  font-weight: bold;
  color: navy;
  content: "Referenciar ";
}
```


#### Resultado

El conjunto de caracteres de una hoja de estilo es UTF-8 de forma predeterminada, pero también se puede especificar en el enlace, en la propia hoja de estilo o de otras formas. Para obtener más información, consulte 4.4 Representación de hojas de estilo CSS en la Especificación CSS.

Los caracteres individuales también se pueden especificar mediante un mecanismo de escape que utiliza una barra invertida como carácter de escape. Por ejemplo, "\265B" es el símbolo de ajedrez para una reina negra ♛. Para obtener más información, consulte Referencia a caracteres no representados en una codificación de caracteres y Caracteres y mayúsculas y minúsculas en la especificación CSS.

### Contenido de imagen

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 `content`.

Esta regla agrega un espacio y un ícono después de cada enlace que tiene la clase `glossary`:

#### HTML


```html
<a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a>
```


#### CSS


```css
a.glossary::after {
  content: " " url("glossary-icon.gif");
}
```
AJAX
====

**Primeros Pasos**
 Una introducción a AJAX.

**JavaScript Asíncrono + XML (AJAX)** 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: HTML o XHTML, CSS, JavaScript, DOM, XML, XSLT, y lo más importante, el objeto XMLHttpRequest. 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.

#### Documentación

Primeros pasos con AJAX

Este artículo te guiará por los conceptos básicos de AJAX y te proporcionará dos ejemplos prácticos para que empieces.

Técnicas Ajax Alternativas

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.

Ajax con PHP, JSON y CSS

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.

Ajax Upload File

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.

Creando formulario editables in situ

Breve tutorial que nos muestra como crear nuestros formularios editables in situ con AJAX, PHP y MySQL, al estilo Flickr.

Arquitectura Cliente Servidor con AJAX

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.

#### Comunidad

* Ajax-es. Foro sobre AJAX.
* Foros sobre AJAX en la comunidad Mozilla en inglés:
* como lista de correo
* como grupo de noticias
* como RSS

#### Herramientas

* Toolkits y Frameworks
* Firebug - Herramienta de Desarrollo Ajax/Web
* Herramienta de Depuración de AJAX
* Kit de Integración Flash/AJAX
* Una Simple Librería de Interfaz XMLHTTP

#### Temas relacionados

* HTML
* XHTML
* CSS
* DOM
* JavaScript
* XML
* XMLHttpRequest
* XSLT
* DHTML
XML: Lenguaje de marcado extensible
===================================

**Extensible Markup Language** es una serialización estricta del Modelo de Objetos del Documento (DOM, por sus siglas en inglés).

Convertir código a cadena de texto (serializing) y visceversa (parsing) a un XMLLa plataforma web proveé Los siguientes objetos para hacer parsing (convertir una cadena de texto a código) y serializing (visceversa) a un XML:

Introducción a XMLXML es un lenguaje de marcado similar a HTML. Significa Extensible Markup Language (Lenguaje de Marcado Extensible) y es una especificación de W3C 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.
XPath
=====

 El **Lenguaje de Caminos XML**
 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.

 XPath es principalmente usado con XSLT
 , 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 XHTML
 y XUL
 , en vez de confiar en el método `getElementById`
 , las propiedades `childNodes`
 , etc.

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.

#### Documentación

Especificación de XPath 1.0

Este documento es una traducción al castellano de la Recomendación del W3C: "XML Path Language (XPath) Version 1.0".


XPath:Ejes

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.


XPath:Funciones

List and description of the core XPath functions and XSLT-specific additions to XPath.


Transformando XML con XSLT

XSLT usa XPath para señalar la dirección de los fragmentos de código en documentos XML que se quieren transformar.


Tutorial de XPath

Tutorial basado en ejemplos que te ayudaran a dar tus primeros pasos.

Ver más...

#### Comunidad

#### Herramientas

Temas relacionados

XSLT
 , XML
 , DOM
XSLT
====

**Tutorial XSLT (en)**
 Este tutorial enseña como usar XSLT para transformar documentos XML en otros formatos.

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.

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

#### Documentación

Transformando XML con XSLT

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.

Elementos XSLT

Referencia de los elementos de XSLT.

Introducción a XSL - XSLT

Cuando un buen ejemplo vale más que mil palabras.

Utilizando la interfaz JavaScript de Mozilla para Transformaciones XSLT (en)

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.

Tutorial XSLT y XPath (en)

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.

¿Qué tipo de lenguaje es XSLT?

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

#### Comunidad

* Los foros de Mozilla en inglés:
* como lista de correo
* como grupo de noticias
* como RSS

#### Herramientas

Temas relacionados

XML, XPath, XSL.


**Nota:** Esta descripción de XSLT ha sido obtenida del Artículo sobre XSLT en la Wikipedia (es).
Seguridad Web
=============

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.

Asegurando su sitioHay una serie de cosas que puede hacer para ayudar a proteger su sitio. Este artículo ofrece una variedad de sugerencias, así como enlaces a otros artículos que brindan información más útil.

Política Same-originLa política same-origin (mismo-origen) restringe cómo un documento o script cargado desde un origen puede interactuar con un recurso de otro origen. Es un mecanismo de seguridad crítico para aislar documentos potencialmente maliciosos.

Tipos de ataquesEste artículo describe varios tipos de ataques de seguridad y técnicas para mitigarlos.