Aug 5, 2020 · Aug 2, 2020 · Aug 2, 2020 · Aug 4, 2020 · Aug 4, 2020 · Aug 4, 2020
diff --git a/8-web-components/1-webcomponents-intro/article.md b/8-web-components/1-webcomponents-intro/article.md
 #From the orbital height
 #Desde la altura orbital

 This section describes a set of modern standards for "web components".
 En esta sección se describe un conjunto de normas modernas para los "web components".

 As of now, these standards are under development. Some features are well-supported and integrated into the modernHTML/DOM standard, while others are yet in draft stage. You can try examples in any browser, Google Chromeis probably the most up to date with these features. Guess, that's becauseGooglefellows are behind many of the related specifications.
 En la actualidad, estos estándares están en desarrollo. Algunas características están bien apoyadas e integradas en el standard modernoHTML/DOM, mientras que otras están aún en fase de borrador. Puedes probar algunos ejemplos en cualquier navegador, Google Chromees probablemente el que más actualizado esté con estas características. Suponemos que eso se debe a que los compañeros deGoogleestán detrás de muchas de las especificaciones relacionadas.

 ##What's common between...
 ##Lo que es común entre...

 The whole component idea is nothing new. It's used in many frameworksand elsewhere.
 La idea del componente completo no es nada nuevo. Se usa en muchos frameworksy en otros lugares.

 Before we move to implementation details, take a look at this great achievement of humanity:
 Antes de pasar a los detalles de implementación, echemos un vistazo a este gran logro de la humanidad:

 ![](satellite.jpg)

 That's the International Space Station (ISS).
 Esa es la Estación Espacial Internacional (EEI).

 And this is how it's made inside (approximately):
 Y así es como se ha montado (aproximadamente):

 ![](satellite-expanded.jpg)

 The International Space Station:
 -Consists of many components.
 -Each component, in its turn, has many smaller details inside.
 -The components are very complex, much more complicated than most websites.
 -Components are developed internationally, by teams from different countries, speaking different languages.
 La Estación Espacial Internacional:
 -Está formada por muchos componentes.
 -Cada componente, a su vez, tiene muchos detalles más pequeños en su interior.
 -Los componentes son muy complejos, mucho más complicados que la mayoría de los sitios web.
 -Los componentes han sido desarrollados internacionalmente, por equipos de diferentes países, que hablan diferentes idiomas.

 ...And this thing flies, keeps humans alive in space!
 ...Y esta cosa vuela, ¡mantiene a los humanos vivos en el espacio!

 How such complex devices are created?
 ¿Cómo se crean dispositivos tan complejos?

 Which principles we could borrow to make our development same-level reliable and scalable? Or, at least, close to it.
 ¿Qué principios podríamos tomar prestados para que nuestro desarrollo sea fiable y escalable al mismo nivel? O, por lo menos, cerca de él.

 ##Component architecture
 ##Arquitectura de componentes

 The well known rule for developing complexsoftwareis: don't make complexsoftware.
 La regla más conocida para desarrollarsoftwarecomplejo es: no hacersoftware complejo.

 If something becomes complex--split it into simpler parts and connect in the most obvious way.
 Si algo se vuelve complejo--divídelo en partes más simples y conéctalas de la manera más obvia.

 **A good architect is the one who can make the complex simple.**
 **Un buen arquitecto es el que puede hacer lo complejo simple.**

 We can split user interface into visual components: each of them has own place on the page, can "do" a well-described task, and is separate from the others.
 Podemos dividir la interfaz de usuario en componentes visuales: cada uno de ellos tiene su propio lugar en la página, puede "hacer" una tarea bien descrita, y está separado de los demás.

 Let's take a look at a website, for example Twitter.
 Echemos un vistazo a un sitio web, por ejemplo Twitter.

 It naturally splits into components:
 Naturalmente está divido en componentes:

 ![](web-components-twitter.svg)

 1.Top navigation.
 2.User info.
 3.Follow suggestions.
 4.Submit form.
 5. (and also 6, 7) --messages.
 1.Navegación superior.
 2.Información usuario.
 3.Sugerencias de seguimiento.
 4.Envío de formulario.
 5. (y también 6, 7) --mensajes.

 Components may have subcomponents, e.g. messages may be parts of a higher-level "message list" component. A clickable user picture itself may be a component, and so on.
 Los componentes pueden tener subcomponentes, p.ej. los mensajes pueden ser parte de un componente "lista de mensajes" de nivel superior. Una imagen de usuario en sí puede ser un componente, y así sucesivamente.

 How do we decide, what is a component? That comes from intuition, experience and common sense. Usually it's a separate visualentity that we can describe in terms of what it does and how it interacts with the page. In the case above, the page has blocks, each of them plays its own role, it's logical to make these components.
 ¿Cómo decidimos qué es un componente? Eso viene de la intuición, la experiencia y el sentido común. Normalmente es una entidad visualseparada que podemos describir en términos de lo que hace y cómo interactua con la página. En el caso anterior, la página tiene bloques, cada uno de ellos juega su propio papel, es lógico crear esos componentes.

 A component has:
 -Its own JavaScript class.
 -DOM structure, managed solely by its class, outside code doesn't access it ("encapsulation" principle).
 -CSS styles, applied to the component.
 - API:events, class methodsetc,to interact with other components.
 Un componentes tiene:
 -Su propia clase de JavaScript.
 -La estructura DOM, gestionada únicamente por su clase, el código externo no accede a ella (principio de  "encapsulación").
 -Estilos CSS, aplicados al componente.
 - API:eventos, métodos de claseetc,para interactuar con otros componentes.

 Once again, the whole "component" thing is nothing special.
 Una vez más, todo el asunto del "componente" no es nada especial.

 There exist manyframeworksand development methodologies to build them, each with its own bells and whistles. Usually, special CSS classes and conventions are used to provide "component feel" -- CSSscoping and DOM encapsulation.
 Existen muchosframeworksy metodologías de desarrollos para construirlos, cada uno con sus propias características y reglas. Normalmente, se utilizan clases y convenciones CSS para proporcionar la "sensación de componente" --alcance deCSSy encapsulación de DOM.

 "Web components"provide built-in browser capabilities for that, so we don't have to emulate them any more.
 "Web components"proporcionan capacidades de navegación incorporadas para eso, así que ya no tenemos que emularlos.

 - [Custom elements](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements) --to define custom HTMLelements.
 - [Shadow DOM](https://dom.spec.whatwg.org/#shadow-trees) --to create an internalDOMfor the component, hidden from the others.
 - [CSS Scoping](https://drafts.csswg.org/css-scoping/) --to declare styles that only apply inside theShadow DOMof the component.
 - [Event retargeting](https://dom.spec.whatwg.org/#retarget)and other minor stuff to make custom components better fit the development.
 - [Custom elements](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements) --para definir elementos HTMLpersonalizados.
 - [Shadow DOM](https://dom.spec.whatwg.org/#shadow-trees) --para crear unDOMinterno para el componente, oculto a los demás componentes.
 - [CSS Scoping](https://drafts.csswg.org/css-scoping/) --para declarar estilos que sólo se aplican dentro delShadow DOMdel componente.
 - [Event retargeting](https://dom.spec.whatwg.org/#retarget)y otras cosas menores para hacer que los componentes se ajusten mejor al desarrollo.

 In the next chapter we'll go into details of "Custom Elements" --thefundamentaland well-supported feature of web components, good on its own.
 En el próximo capítulo entraremos en detalles en los "Custom Elements" --la característicafundamentaly bien soportada de los componentes web, buena por sí misma.
Original file line number	Diff line number	Diff line change
		@@ -1,76 +1,76 @@
		#From the orbital height
		#Desde la altura orbital

		This section describes a set of modern standards for "web components".
		En esta sección se describe un conjunto de normas modernas para los "web components".

		As of now, these standards are under development. Some features are well-supported and integrated into the modernHTML/DOM standard, while others are yet in draft stage. You can try examples in any browser, Google Chromeis probably the most up to date with these features. Guess, that's becauseGooglefellows are behind many of the related specifications.
		En la actualidad, estos estándares están en desarrollo. Algunas características están bien apoyadas e integradas en el standard modernoHTML/DOM, mientras que otras están aún en fase de borrador. Puedes probar algunos ejemplos en cualquier navegador, Google Chromees probablemente el que más actualizado esté con estas características. Suponemos que eso se debe a que los compañeros deGoogleestán detrás de muchas de las especificaciones relacionadas.

		##What's common between...
		##Lo que es común entre...

		The whole component idea is nothing new. It's used in many frameworksand elsewhere.
		La idea del componente completo no es nada nuevo. Se usa en muchos frameworksy en otros lugares.

		Before we move to implementation details, take a look at this great achievement of humanity:
		Antes de pasar a los detalles de implementación, echemos un vistazo a este gran logro de la humanidad:

		![](satellite.jpg)

		That's the International Space Station (ISS).
		Esa es la Estación Espacial Internacional (EEI).

		And this is how it's made inside (approximately):
		Y así es como se ha montado (aproximadamente):

		![](satellite-expanded.jpg)

		The International Space Station:
		-Consists of many components.
		-Each component, in its turn, has many smaller details inside.
		-The components are very complex, much more complicated than most websites.
		-Components are developed internationally, by teams from different countries, speaking different languages.
		La Estación Espacial Internacional:
		-Está formada por muchos componentes.
		-Cada componente, a su vez, tiene muchos detalles más pequeños en su interior.
		-Los componentes son muy complejos, mucho más complicados que la mayoría de los sitios web.
		-Los componentes han sido desarrollados internacionalmente, por equipos de diferentes países, que hablan diferentes idiomas.

		...And this thing flies, keeps humans alive in space!
		...Y esta cosa vuela, ¡mantiene a los humanos vivos en el espacio!

		How such complex devices are created?
		¿Cómo se crean dispositivos tan complejos?

		Which principles we could borrow to make our development same-level reliable and scalable? Or, at least, close to it.
		¿Qué principios podríamos tomar prestados para que nuestro desarrollo sea fiable y escalable al mismo nivel? O, por lo menos, cerca de él.

		##Component architecture
		##Arquitectura de componentes

		The well known rule for developing complexsoftwareis: don't make complexsoftware.
		La regla más conocida para desarrollarsoftwarecomplejo es: no hacersoftware complejo.

		If something becomes complex--split it into simpler parts and connect in the most obvious way.
		Si algo se vuelve complejo--divídelo en partes más simples y conéctalas de la manera más obvia.

		A good architect is the one who can make the complex simple.
		Un buen arquitecto es el que puede hacer lo complejo simple.

		We can split user interface into visual components: each of them has own place on the page, can "do" a well-described task, and is separate from the others.
		Podemos dividir la interfaz de usuario en componentes visuales: cada uno de ellos tiene su propio lugar en la página, puede "hacer" una tarea bien descrita, y está separado de los demás.

		Let's take a look at a website, for example Twitter.
		Echemos un vistazo a un sitio web, por ejemplo Twitter.

		It naturally splits into components:
		Naturalmente está divido en componentes:

		![](web-components-twitter.svg)

		1.Top navigation.
		2.User info.
		3.Follow suggestions.
		4.Submit form.
		5. (and also 6, 7) --messages.
		1.Navegación superior.
		2.Información usuario.
		3.Sugerencias de seguimiento.
		4.Envío de formulario.
		5. (y también 6, 7) --mensajes.

		Components may have subcomponents, e.g. messages may be parts of a higher-level "message list" component. A clickable user picture itself may be a component, and so on.
		Los componentes pueden tener subcomponentes, p.ej. los mensajes pueden ser parte de un componente "lista de mensajes" de nivel superior. Una imagen de usuario en sí puede ser un componente, y así sucesivamente.

		How do we decide, what is a component? That comes from intuition, experience and common sense. Usually it's a separate visualentity that we can describe in terms of what it does and how it interacts with the page. In the case above, the page has blocks, each of them plays its own role, it's logical to make these components.
		¿Cómo decidimos qué es un componente? Eso viene de la intuición, la experiencia y el sentido común. Normalmente es una entidad visualseparada que podemos describir en términos de lo que hace y cómo interactua con la página. En el caso anterior, la página tiene bloques, cada uno de ellos juega su propio papel, es lógico crear esos componentes.

		A component has:
		-Its own JavaScript class.
		-DOM structure, managed solely by its class, outside code doesn't access it ("encapsulation" principle).
		-CSS styles, applied to the component.
		- API:events, class methodsetc,to interact with other components.
		Un componentes tiene:
		-Su propia clase de JavaScript.
		-La estructura DOM, gestionada únicamente por su clase, el código externo no accede a ella (principio de "encapsulación").
		-Estilos CSS, aplicados al componente.
		- API:eventos, métodos de claseetc,para interactuar con otros componentes.

		Once again, the whole "component" thing is nothing special.
		Una vez más, todo el asunto del "componente" no es nada especial.

		There exist manyframeworksand development methodologies to build them, each with its own bells and whistles. Usually, special CSS classes and conventions are used to provide "component feel" -- CSSscoping and DOM encapsulation.
		Existen muchosframeworksy metodologías de desarrollos para construirlos, cada uno con sus propias características y reglas. Normalmente, se utilizan clases y convenciones CSS para proporcionar la "sensación de componente" --alcance deCSSy encapsulación de DOM.

		"Web components"provide built-in browser capabilities for that, so we don't have to emulate them any more.
		"Web components"proporcionan capacidades de navegación incorporadas para eso, así que ya no tenemos que emularlos.

		- [Custom elements](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements) --to define custom HTMLelements.
		- [Shadow DOM](https://dom.spec.whatwg.org/#shadow-trees) --to create an internalDOMfor the component, hidden from the others.
		- [CSS Scoping](https://drafts.csswg.org/css-scoping/) --to declare styles that only apply inside theShadow DOMof the component.
		- [Event retargeting](https://dom.spec.whatwg.org/#retarget)and other minor stuff to make custom components better fit the development.
		- [Custom elements](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements) --para definir elementos HTMLpersonalizados.
		- [Shadow DOM](https://dom.spec.whatwg.org/#shadow-trees) --para crear unDOMinterno para el componente, oculto a los demás componentes.
		- [CSS Scoping](https://drafts.csswg.org/css-scoping/) --para declarar estilos que sólo se aplican dentro delShadow DOMdel componente.
joaquinelio marked this conversation as resolved. Show resolvedHide resolved
		- [Event retargeting](https://dom.spec.whatwg.org/#retarget)y otras cosas menores para hacer que los componentes se ajusten mejor al desarrollo.

		In the next chapter we'll go into details of "Custom Elements" --thefundamentaland well-supported feature of web components, good on its own.
		En el próximo capítulo entraremos en detalles en los "Custom Elements" --la característicafundamentaly bien soportada de los componentes web, buena por sí misma.