Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Addresses #1 #2

Merged
merged 5 commits into from
Jun 26, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
.DS_Store
_config.yml
.sass-cache
_site
_site

# Editor settings
.vscode
8 changes: 4 additions & 4 deletions _posts/2015-01-01-introduction.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
---
layout: chapter
title: "Introduction"
subtitle: "An overview of how the <strong>Web</strong> works"
title: "Introducción"
subtitle: "Un vistazo general acerca de cómo funciona la <strong>Web</strong>"
section: web
---

Before diving into the technical and practical aspect of coding, you need to have a **basic** understanding of how the underlying _environment_ works.
Antes de adentrarnos en el aspecto técnico y práctico de la programación, necesitas tener un entendimiento **básico** de cómo funciona el _entorno_ subyacente.

This introduction is meant to provide a quick overview of both the **Internet** and the **Web**.
Esta introducción tiene como fin proveerte de un resumen rápido acerca de **Internet** y la **Web**.
123 changes: 62 additions & 61 deletions _posts/2015-01-02-internet.md
Original file line number Diff line number Diff line change
@@ -1,95 +1,96 @@
---
layout: post
title: "The <strong>Internet</strong>"
title: "<strong>Internet</strong>"
subtitle: "A giant <strong>network</strong> of computers"
subtitle: "Una <strong>red</strong> gigante de computadoras"
section: web
---

The Internet is not the same as the Web. The Internet is bigger, older, and more varied.
Internet no es lo mismo que la Web (la red). Internet es más grande, más viejo y más variado.

Imagine how **roads** are _interconnected_ throughout the world: small streets connect to city lanes that turn into regional roads who then merge with national and international highways. You can drive from your house to any other house in the world[^1]. There is no actual center in this road network either.
Imagina cómo algunos **caminos** están _interconectados_ en todo el mundo: pequeñas calles conectan a las avenidas de la ciudad que se convierten en vías que se unen a las carreteras y autopistas nacionales e internacionales. Puedes conducir desde tu casa hacia cualquier otra casa en el mundo[^1]. No hay un centro particular en esta red.

The Internet is similar. But instead of roads, it's **cables**. And instead of houses, it's **computers**. And instead of cars traveling on this network, it's **information**.
Internet es algo similar. Pero en lugar de caminos, son **cables**. Y en lugar de casas, son **computadoras**. Y en vez de autos viajando por esta red, tenemos **información**.

It was invented in 1969 to connect a computers across the US. Nowadays, _billions_ of devices (including PCs, laptops, mobile phones, TVs, fridges...) are **interconnected**.
Fue inventado en 1969 para conectar a las computadoras a lo largo y ancho de Estados Unidos. Hoy en día _miles de millones_ de dispositivos (incluyendo PCs, laptops, teléfonos celulares, televisiones, refrigeradores...) están **interconectados**.

### Client and Server
### Cliente y Servidor

Usually, a connection on the Internet takes place between **2** computers only:
Generalmente, una conexión en Internet tiene lugar entre **2** computadoras únicamente:

* one that **has** the information (the _server_)
* one that **wants** it (the _client_).
* Una que **tiene** la información (el _servidor_).
* Una que la **quiere** (el _cliente_).

A **client** is a program that can take up many forms:
Un **cliente** es un programa que puede adoptar muchas formas:

* a Web browser (like Firefox)
* an email client (like Outlook)
* a messenger app (like Whatsapp)
* a video streaming service (like Netflix)
* Un navegador Web (como Firefox)
* Un cliente de correo (como Outlook)
* Una aplicación de mensajería (como Whatsapp)
* Un servicio de transmisión de video (como Netflix)

Each of these programs will retrieve information from a **server**, where something is stored (a website, your emails, messages, movies). Although client programs also send information to the server, they usually don't store it, while servers do.
Cada uno de estos programas obtendrá la información desde un **servidor**, donde algo se almacena (un sitio web, tus correos, mensajes, películas). Aunque los programas cliente también envían información al servidor, usualmente no la almacenan, mientras que los servidores sí lo hacen.

A **server** can be considered a _dedicated_ computer always connected to the Internet, whose sole purpose is to **deliver** content.
Un **servidor** puede ser considerado una computadora _dedicada_ que siempre está conectada a Internet, cuyo único propósito es **entregar** (o servir) el contenido.

Although any device connected to the Internet can be both a client and a server at the same time, most devices we use are considered **clients**, because we only _retrieve_ data, and don't deliver any.
Aunque cualquier dispositivo conectado a Internet puede ser ambos un cliente y un servidor al mismo tiempo, la mayoría de los dispositivos que usamos son considerados **clientes**, porque nosotros únicamente _obtenemos_ datos, y no servimos nunguno.
{: .info}

### IP Address
### Dirección IP

Like every house has a specific and _unique_ postal address, each computer connected to the Internet is given an **IP address**, in order to be identified on the network.
Al igual que toda casa tiene una dirección postal _única_ y específica, cada computadora conectada a Internet recibe una **dirección IP**, con el fin de poder ser identificada en la red.

An IP address usually looks like a combination of 4 numbers: `91.198.174.192`.
Una dirección IP normalmente aparece como una combinación de 4 números: `91.198.174.192`.

### Domains
### Dominios

Although IP addresses are useful for computers to tell each other part thanks to their uniqueness, they are hard to read and remember for us humans.
Aunque las direcciones IP son útiles para que las computadoras puedan reconocerse entre sí gracias a que son únicas, son difíciles de leer y de recordar para nosotros los humanos.

That is why **domains** were created in 1985. They _associate_ an IP address like `91.198.174.192` with a string of **text** like `wikipedia.org`. As a result, both are **interchangeable**: you can go to <http://91.198.174.192> or <http://wikipedia.org> and end up on the exact same website.
Es por eso que se crearon los **dominios** en 1985. Los dominios _asocian_ una dirección IP como `91.198.174.192` con una cadena de **texto** como `wikipedia.org`. Como resultado, ambos son **intercambiables**: puedes ir a <http://91.198.174.192> o <http://wikipedia.org> y terminar exactamente en el mismo sitio web.

A domain has **3** parts, that are read from right to left:
Un dominio consta de **3** partes, que se leen de derecha a izquierda:

* **Top-Level Domain** (or TLD): there are generic ones (`.com`, `.org`, `.net`) and country-specific ones (`.us`, `.nl`, `.fr`).
* **Domain name**: a name like `wikipedia` or `marksheet`, that can include letters, numbers, but no space or dot.
* **Subdomain** (optional). Although this 3rd part is optional, most websites use `www` as the default subdomain.
* **Dominios de Nivel Superior** Top-Level Domain o TLD en inglés: son los genéricos (`.com`, `.org`, `.net`) y de países específicos (`.us`, `.nl`, `.fr`, `.mx`).
* **Nombres de dominio** como `wikipedia` o `marksheet`, que pueden incluir letras, números, pero no espacios o puntos.
* **Subdominios** (opcionales). Aunque esta tercera parte es opcional, muchos sitios web usan `www` como el dominio por default.

Think of domains as a way to **name** computers connected to the Internet.
Piensa en los dominios como una forma de **nombrar** computadoras que se conectan a Internet.

_How do I buy a domain?_{:.question}
You don't actually _buy_ a domain, but actually **rent** it from whoever is managing the TLD you're aiming for.
Companies who manage Internet domains are called **domain registrars**. The most famous ones are [Namecheap](https://www.namecheap.com/) and [Gandi](https://www.gandi.net/).
_¿Cómo compro un dominio?_{:.question}
No puedes _comprar_ un dominio de hecho, pero puedes **rentarlo** de quien esté administrando los TLD que quieres incluir en él.
Las compañías que administran los dominios de Internet se llaman **registradores** (domain registrars). Los más famosos son [Namecheap](https://www.namecheap.com/) y [Gandi](https://www.gandi.net/).

### Protocols
### Protocolos

The purpose of interconnecting all these computers is for them to **interact** with each other. And like humans talk in different _languages_, computers on the Internet talk using **protocols**.
El propósito de interconectar todas estas computadoras es para que puedan **interactuar** unas con otras. Y al igual que los humanos hablan diferentes **idiomas**, las computadoras en Internet hablan utilizando **protocolos**.

Each of them serves a different purpose:
Cada uno tiene un propósito diferente:

<div class="table">
<table>
<tr>
<th>Protocol</th>
<th>Used for</th>
<th>Created in</th>
<th>Protocolo</th>
<th>Utilizado para</th>
<th>Creado en</th>
</tr>
<tr>
<td>
<abbr title="File Transfer Protocol">FTP</abbr>
</td>
<td>File transfer</td>
<td>Transferencia de Archivos.</td>
<td>1971</td>
</tr>
<tr>
<td>
<abbr title="Simple Mail Transfer Protocol">SMTP</abbr>
</td>
<td>Sending Emails</td>
<td>Enviar correos electrónicos.</td>
<td>1971</td>
</tr>
<tr>
<td>
<abbr title="Internet Message Access Protocol">IMAP</abbr>
</td>
<td>Receiving Emails</td>
<td>Recibir correos electrónicos</td>
<td>1986</td>
</tr>
<tr>
Expand All @@ -103,43 +104,43 @@ Each of them serves a different purpose:
<td>
<abbr title="HyperText Transfer Protocol">HTTP</abbr>
</td>
<td>Browsing HTML documents (Webpages)</td>
<td>Navegar por documentos HTML (páginas Web)</td>
<td>1989</td>
</tr>
</table>
</div>

### URL

Now that we've seen how domains and protocols, we can build a **URL**: a **U**niform **R**esource **L**ocator.
Ahora que hemos visto que existen los dominios y los protocolos, podemos construir un **URL**: **U**niform **R**esource **L**ocator. _(Localizador de Recursos Uniforme)_

For example, the current page's URL is `http://marksheet.io/internet.html`, and can be divided in 3 parts:
Por ejemplo, el URL de página actual es `http://marksheet.io/internet.html`, y puede ser dividido en 3 partes:

* `http://` is the **protocol**
* `marksheet.io` is the **domain**
* `/internet.html` is the **path**
* `http://` es el **protocolo**
* `marksheet.io` es el **dominio**
* `/internet.html` es la **ruta**

This URL is **unique** and defines
Este URL es **único** y define

* _where_ to find something across the internet `marksheet.io/internet.html`
* _how_ the computer is supposed to read it `http://`
* _dónde_ encontrar algo en internet `marksheet.io/internet.html`
* _cómo_ debe leerlo la computadora `http://`

Los URLs pueden ser más complejos a la vista. Puedes leer acerca de la [anatomía de un URL](http://doepud.co.uk/blog/anatomy-of-a-url). (artículo en inglés)

URLs can be more complex-looking. You can read about the [anatomy of an URL](http://doepud.co.uk/blog/anatomy-of-a-url).
{: .info}

Internet
: A very large **network** of **computers** connected to each other.

Protocol
: A set of rules, like a **language**, in which computers **communicate** with each other.
: Una **red** muy grande de **computadoras** conectadas una a la otra.

IP address
: A combination of **numbers** like `91.198.174.192` which acts like a **unique identifier** for a computer connected to the Internet
Protocolo
: Un conjunto de reglas, como un **idioma** en el que las computadoras se **comunican** entre sí.

Domain
: A **text** like `marksheet.io` which acts like a **unique identifier** for a computer connected to the Internet.
The difference with IP addresses is that domains are easier to read for **humans**.
Dirección IP
: Una combinación de **números** como `91.198.174.192` que actúa como un **identificador único** para una computadora conectada a Internet.

[^1]: Apart from oceans obviously.
Dominio
: Un **texto** como `marksheet.io`que actúa como un **identificador único** para una computadora conectada a Internet.
La diferencia con las direcciones IP es que los dominios son más fáciles de leer para los **humanos**.

*[SMTP]: Simple Mail Transfer Protocol
[^1]: Que no esté a la mitad del océano, obviamente.
*[SMTP]: Simple Mail Transfer Protocol (Protocolo de Transferencia de Correo Simple)
94 changes: 47 additions & 47 deletions _posts/2015-01-03-web.md
Original file line number Diff line number Diff line change
@@ -1,111 +1,111 @@
---
layout: post
title: "The <strong>World Wide Web</strong>"
subtitle: "The <strong>Web</strong> is one part of the Internet: the <strong>HTTP</strong> part"
title: "<strong>World Wide Web</strong>"
subtitle: "La <strong>Web</strong> es una parte de Internet: la parte <strong>HTTP</strong>"
section: web
---

### Web
### La Web

We have seen how computers connected on the Internet communicate in different languages called **protocols**, to exchange emails, files, chat messages...
Hemos visto cómo las computadoras en Internet se comunican en diferentes idiomas llamados **protocolos**, para intercambiar correos electrónicos, archivos, mensajes de chat...

One of these protocols is called **HTTP**. It's the protocol with which computers share **Webpages** between each other, like the one you're currently reading.
Uno de estos protocolos se llama **HTTP**. Es el protocolo con el que las computadoras comparten **Páginas Web** entre sí, como la que ahora estás leyendo.

The **Web** is the part of the Internet where Webpages are shared. You can tell you're browsing the Web if the URL starts with `http://`.
La **Web** es la parte de Internet donde las Páginas Web son compartidas. Puedes decir que estás navegando la Web si el URL comienza con `http://`.

### Webpage
### Página Web

A Webpage is a **document** written in HTML that is shared across the **Web**.
Una Página Web es un **documento** escrito en HTML que se comparte a través de la **Web**.

You open these documents with a **Web browser**.
Tú abres estos documentos con un **navegador Web**.

To access a Webpage you can either:
Para tener acceso a una página web puedes:

* type its **URL**, like `http://marksheet.io/web.html`
* click on a **link**, like [this one](http://marksheet.io/internet.html)
* escribir su **URL**, como `http://marksheet.io/web.html`
* dar clic en un **link** (hipervínculo), como [este](http://marksheet.io/internet.html)

Because remember URLs is cumbersome, the Web at its origin is based upon **interlinked documents** to make easy for users to _browse_ the Web.
Debido a que recordar URLs es engorroso, la Web en un origen se basó en **documentos interligados** para hacer que fuera más fácil para los usuarios _navegar_ la Web.

### Website
### Sitio Web

A **Website** is simply a _collection_ of Webpages located on a **same domain**.
Un **Sitio Web** es simplemente una _colección_ de Páginas Web que se encuentran en un **mismo dominio**.

* **Web** `http://`
* Website `marksheet.io`
* Webpage `/introduction.html`
* Webpage `/internet.html`
* Webpage `/web.html`
* Sitio Web `marksheet.io`
* Página Web `/introduction.html`
* Página Web `/internet.html`
* Página Web `/web.html`

### Opening a Webpage in your browser
### Abriendo una página Web en tu navegador

By navigating to <http://marksheet.io/web.html>, you're asking a computer on the Internet to get the `web.html` document.
Al navegar a <http://marksheet.io/web.html>, estás pidiendo a una computadora en Internet que obtenga el documento `web.html`.

In that case, your computer is the **client**. You're asking the MarkSheet **server** (on which the website is hosted) to get the file called `web.html`.
En ese caso, tu computadora es el **cliente**. Tu estás pidiendo al **servidor** Marksheet (donde el sitio web está alojado) que obtenga el archivo llamado `web.html`.

<div class="table">
<table>
<tr>
<th>
<em>Client</em>
<strong>Your computer</strong>
<em>Cliente</em>
<strong>Tu computadora</strong>
</th>
<td>
<q>Hi MarkSheet computer! I'd like the <code>web.html</code> file please</q>
<q>Hola computadora Marksheet! Quisiera el archivo <code>web.html</code> por favor.</q>
</td>
</tr>
<tr>
<th>
<em>Server</em>
<strong>The MarkSheet computer</strong>
<em>Servidor</em>
<strong>La computadora MarkSheet</strong>
</th>
<td>
<q>Let me check if it's there... </q>
<q>Déjame ver si está ahí... </q>
</td>
</tr>
<tr>
<th>
<em>Client</em>
<strong>Your computer</strong>
<em>Cliente</em>
<strong>Tu computadora</strong>
</th>
<td>
<q>Ok I'll wait</q>
<q>Está bien, esperaré.</q>
</td>
</tr>
<tr>
<th>
<em>Server</em>
<strong>The MarkSheet computer</strong>
<em>Servidor</em>
<strong>La computadora Marksheet</strong>
</th>
<td>
<q>Oh, here it is! Let me send that to you.</q>
<q>Oh, aquí está, te lo enviaré.</q>
</td>
</tr>
<tr>
<th>
<em>Client</em>
<strong>Your computer</strong>
<em>Cliente</em>
<strong>Tu computadora</strong>
</th>
<td>
<q>Got it. Thanks!</q>
<q>Lo tengo, ¡gracias!</q>
</td>
</tr>
</table>
</div>

Your browser is then able to display `web.html`.
Tu navegador ahora puede mostrar `web.html`.

The file is **not saved** on your computer though: it is only displayed temporarily while you navigate it. If you go to <http://marksheet.io/web.html> later, it will ask the MarkSheet computer _again_ for that same file, if it still exists. That way, it ensures you always get the _latest_ version of the file.
El archivo **no se guarda** en tu computadora: sólo se despliega temporalmente mientras lo navegas. Si quieres ir a <http://marksheet.io/web.html> después, tu computadora le preguntará a la computadora Marksheet _otra vez_ por ese archivo, si es que existe aún. De este modo, se asegura de que siempre tienes _la última_ versión del archivo.

Web
: The part of the Internet that uses the **HTTP** protocol.
: La parte de Internet que utiliza el protocolo **HTTP**

Webpage
: A document written in **HTML**.
Página Web
: Un documento escrito en **HTML**.

Website
: A collection of Webpages on the same **domain**.
Sitio Web
: Una colección de Páginas Web en el mismo **dominio**.

Browser
: A program that can **open** Webpages in order to display them.
Navegador
: Un programa que puede **abrir** Páginas Web con el fin de mostrarlas.

*[HTTP]: HyperText Transfer Protocol
*[HTTP]: HyperText Transfer Protocol (Protocolo de Transferencia de HiperTexto)
Loading