diff --git a/.gitignore b/.gitignore index c57258e..70ab1fc 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,7 @@ .DS_Store _config.yml .sass-cache -_site \ No newline at end of file +_site + +# Editor settings +.vscode \ No newline at end of file diff --git a/_posts/2015-01-01-introduction.md b/_posts/2015-01-01-introduction.md index 2862a2b..1e01b7b 100644 --- a/_posts/2015-01-01-introduction.md +++ b/_posts/2015-01-01-introduction.md @@ -1,10 +1,10 @@ --- layout: chapter -title: "Introduction" -subtitle: "An overview of how the Web works" +title: "Introducción" +subtitle: "Un vistazo general acerca de cómo funciona la Web" 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**. \ No newline at end of file diff --git a/_posts/2015-01-02-internet.md b/_posts/2015-01-02-internet.md index a60f2a7..eda3591 100644 --- a/_posts/2015-01-02-internet.md +++ b/_posts/2015-01-02-internet.md @@ -1,95 +1,96 @@ --- layout: post -title: "The Internet" +title: "Internet" subtitle: "A giant network of computers" +subtitle: "Una red 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 or 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 o 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:
- - - + + + - + - + - + @@ -103,7 +104,7 @@ Each of them serves a different purpose: - +
ProtocolUsed forCreated inProtocoloUtilizado paraCreado en
FTP File transferTransferencia de Archivos. 1971
SMTP Sending EmailsEnviar correos electrónicos. 1971
IMAP Receiving EmailsRecibir correos electrónicos 1986
HTTP Browsing HTML documents (Webpages)Navegar por documentos HTML (páginas Web) 1989
@@ -111,35 +112,35 @@ Each of them serves a different purpose: ### 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 \ No newline at end of file +[^1]: Que no esté a la mitad del océano, obviamente. +*[SMTP]: Simple Mail Transfer Protocol (Protocolo de Transferencia de Correo Simple) \ No newline at end of file diff --git a/_posts/2015-01-03-web.md b/_posts/2015-01-03-web.md index 789d5f5..1b80a3b 100644 --- a/_posts/2015-01-03-web.md +++ b/_posts/2015-01-03-web.md @@ -1,111 +1,111 @@ --- layout: post -title: "The World Wide Web" -subtitle: "The Web is one part of the Internet: the HTTP part" +title: "World Wide Web" +subtitle: "La Web es una parte de Internet: la parte HTTP" 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 , you're asking a computer on the Internet to get the `web.html` document. +Al navegar a , 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`.
- Client - Your computer + Cliente + Tu computadora - Hi MarkSheet computer! I'd like the web.html file please + Hola computadora Marksheet! Quisiera el archivo web.html por favor.
- Server - The MarkSheet computer + Servidor + La computadora MarkSheet - Let me check if it's there... + Déjame ver si está ahí...
- Client - Your computer + Cliente + Tu computadora - Ok I'll wait + Está bien, esperaré.
- Server - The MarkSheet computer + Servidor + La computadora Marksheet - Oh, here it is! Let me send that to you. + Oh, aquí está, te lo enviaré.
- Client - Your computer + Cliente + Tu computadora - Got it. Thanks! + Lo tengo, ¡gracias!
-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 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 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) diff --git a/_posts/2015-01-04-browser.md b/_posts/2015-01-04-browser.md index 01fe281..d53301c 100644 --- a/_posts/2015-01-04-browser.md +++ b/_posts/2015-01-04-browser.md @@ -1,70 +1,70 @@ --- layout: post -title: "A Web browser" -subtitle: "A browser is a document viewer. What kind of document? Webpages." +title: "Un navegador Web" +subtitle: "Un navegador es un visor de documentos. ¿Qué tipo de documentos? Páginas web." section: web --- -You're currently using a _Web browser_ to read this _Webpage_ written in _HTML_. +Ahora mismo estás usando un _navegador Web_ para leer esta _página web_ escrita en _HTML_. -### HTML documents +### Documentos HTML -**Webpages** are **HTML documents**, like other files on your computer. They are just text files with a `.html` extension. +**Las páginas web** son **Documentos HTML**, como otros archivos en tu computadora. Son sólo archivos de texto con una extensión `.html`. -On your computer, you probably have different **types** of files: +En tu computadora, probablemente tienes diferentes **tipos** de archivos: -* `.jpg` for images -* `.mp3` for music -* `.avi` for videos -* `.doc` for Word documents -* `.xls` for Excel spreadsheets +* `.jpg` para imágenes +* `.mp3` para música +* `.avi` para videos +* `.doc` para documentos de Word +* `.xls` para hojas de cálculo de Excel -Each of these _types_ of files can be opened by a specific **program**. Some of these programs can only _open_ these files, while others can both _open_ and _create_ files. +Cada uno de estos _tipos_ de archivos puede ser abierto por un **programa** en específico. Algunos de estos programas sólo pueden _abrir_ estos archivos, mientras que otros pueden _abrir_ y _crear_ archivos. -By default, **file extensions** are hidden. In this tutorial, we'll need to be able to edit these extensions. So follow these instructions to display file extensions: -**Windows**: [Show or hide file name extensions](http://windows.microsoft.com/en-us/windows/show-hide-file-name-extensions) -**Mac**: [Show and hide filename extensions](https://support.apple.com/kb/PH10845?locale=en_US) +Por default, **las extensiones de archivos** están ocultas. En este tutorial, necesitaremos poder editar estas extensiones. Así que deberás seguir estas instrucciones para mostrar las extensiones de archivo en tu computadora: +**Windows**: [Mostrar u ocultar las extensiones de nombre de archivo](https://support.microsoft.com/es-es/help/865219/how-to-show-or-hide-file-name-extensions-in-windows-explorer) +**Mac**: [Mostrar u ocultar las extensiones de los nombres de archivos](https://support.apple.com/kb/PH25381?locale=es_MX) {: .info} -For example: +Por ejemplo: -* iTunes can **open** `.mp3` files but can not create them. -* Microsoft Word can however both **open** and **create** `.doc` files. +* iTunes puede **abrir** archivos `.mp3` pero no puede crearlos. +* Microsoft Word, por otro lado puede **abrir** y **crear** archivos `.doc`.
- - + + - + - + - + - + - + - + - + @@ -91,47 +91,47 @@ For example: - + - +
ProgramTypeProgramaTipo - Can open these files + Puede abrir estos archivos - Can also create these files? + También puede crear estos archivos?
Microsoft WordWord editorEditor de textos .doc .docx YesSí
PaintGraphicsGráficos .jpg .gif .bmp YesSí
VLCVideo playerReproductor de video .avi .mpg @@ -73,7 +73,7 @@ For example:
iTunesMusic playerReproductor de música .mp3 .wav @@ -83,7 +83,7 @@ For example:
FirefoxWeb browserNavegador Web .html
Notepad++Text editorEditor de texto .text .html YesSí
-The program used to **open** HTML documents is a **browser**, like Firefox or Google Chrome. -The program used to **create** HTML documents is a **text editor**, like Notepad++ or Sublime Text. +El programa que se usa para **abrir** documentos HTML es un **navegador**, como Firefox o Google Chrome. +El programa que se usa para **crear** documentos HTML es un **editor de texto**, como Notepad++ o Sublime Text. -### HTML source code +### Código fuente HTML -HTML code looks like this: +El código HTML se ve así: {% highlight html %} -

Hello World

+

Hola Mundo

{% endhighlight %} -This code is written with a **text editor**. You can see the tags `

` and `

` that stand for **paragraph**. +Este código está escrito con un **editor de texto**. Puedes ver las etiquetas `

`y `

` que representan un **párrafo**. -When opened by a **browser**, these tags are **not displayed** but rather **interpreted** by the browser: +Cuando un **navegador** lo abre, estas etiquetas **no se muestran**, más bien se **interpretan** en el navegador:
-

Hello World

+

Hola Mundo

-The browser sees the `

` and `

` tags and understands that `Hello World` is a **paragraph**. +El navegador ve las etiquetas `

` y `

` y entiende que `Hola Mundo` es un **párrafo**. -Remember that an HTML document can be opened in **2 ways**: +Recuerda que un documento HTML puede ser abierto de **2 maneras**: -* by a **text editor** who _sees_ the source code -* by a **browser** who _interprets_ the source code +* por un **editor de texto** que _ve_ el código fuente +* por un **navegador** que _interpreta_ el código fuente -### List of Web browsers +### Lista de navegadores Web -As the Web has become the primary use of the internet, every computer and smartphone comes with a default browser installed. +Como la Web se ha convertido en el uso principal de Internet, cada computadora y smartphone viene con un navegador instalado por default. -The most popular ones are: +Los más populares son: * [![Chrome](/images/web-browsers/chrome.png)](http://www.google.com/chrome/) **Chrome** * [![Firefox](/images/web-browsers/firefox.png)](https://www.mozilla.org/firefox/) **Firefox** @@ -140,14 +140,14 @@ The most popular ones are: * [![Safari](/images/web-browsers/safari.png)](http://www.apple.com/safari/) **Safari** {: .software} -### List of text editors +### Lista de editores de texto -The most popular ones are: +Los más populares son: * [![Notepad++](/images/text-editors/notepad-plus-plus.png)](https://notepad-plus-plus.org/) **Notepad++** * [![Sublime Text](/images/text-editors/sublime-text.png)](http://www.sublimetext.com/) **Sublime Text** {: .software} -You will need to install one to **write** HTML and CSS. +Necesitarás installar alguno para **escribir** HTML y CSS. -While the rest of this tutorial doesn't require to write any code, it's **recommended** to try out the examples yourself. +Aunque el resto de este tutorial no requiere que escribas el código, es **recomendable** que pruebes los ejemplos por tu cuenta.