Skip to content

Commit

Permalink
MS-1 Finishing the web browser section.
Browse files Browse the repository at this point in the history
  • Loading branch information
Axel Martínez committed Dec 18, 2017
1 parent 3df5076 commit 5d1af80
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 52 deletions.
5 changes: 4 additions & 1 deletion .gitignore
View file
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
4 changes: 1 addition & 3 deletions _posts/2015-01-02-internet.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,6 @@ Un **cliente** es un programa que puede adoptar muchas formas:

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.

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.
Expand Down Expand Up @@ -135,7 +133,7 @@ Internet
: Una **red** muy grande de **computadoras** conectadas una a la otra.

Protocolo
: Un conjunto de reglas, como un **idioma** en el que las computadoras se **comunican** entre sí.
: Un conjunto de reglas, como un **idioma** en el que las computadoras se **comunican** entre sí.

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.
Expand Down
96 changes: 48 additions & 48 deletions _posts/2015-01-04-browser.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,66 +5,66 @@ subtitle: "A browser is a <strong>document</strong> viewer. What kind of documen
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`.

<div class="table">
<table>
<tr>
<th>Program</th>
<th>Type</th>
<th>Programa</th>
<th>Tipo</th>
<th>
Can <em>open</em> these files
Puede <em>abrir</em> estos archivos
</th>
<th>
Can also <em>create</em> these files?
También puede <em>crear</em> estos archivos?
</th>
</tr>
<tr>
<td>Microsoft Word</td>
<td>Word editor</td>
<td>Editor de textos</td>
<td>
<code>.doc</code>
<code>.docx</code>
</td>
<td class="yes"><span>Yes</span></td>
<td class="yes"><span>Sí</span></td>
</tr>
<tr>
<td>Paint</td>
<td>Graphics</td>
<td>Gráficos</td>
<td>
<code>.jpg</code>
<code>.gif</code>
<code>.bmp</code>
</td>
<td class="yes"><span>Yes</span></td>
<td class="yes"><span>Sí</span></td>
</tr>
<tr>
<td>VLC</td>
<td>Video player</td>
<td>Reproductor de video</td>
<td>
<code>.avi</code>
<code>.mpg</code>
Expand All @@ -73,7 +73,7 @@ For example:
</tr>
<tr>
<td>iTunes</td>
<td>Music player</td>
<td>Reproductor de música</td>
<td>
<code>.mp3</code>
<code>.wav</code>
Expand All @@ -83,55 +83,55 @@ For example:
</tr>
<tr>
<td>Firefox</td>
<td>Web browser</td>
<td>Navegador Web</td>
<td>
<code>.html</code>
</td>
<td class="no">No</td>
</tr>
<tr>
<td>Notepad++</td>
<td>Text editor</td>
<td>Editor de texto</td>
<td>
<code>.text</code>
<code>.html</code>
</td>
<td class="yes"><span>Yes</span></td>
<td class="yes"><span>Sí</span></td>
</tr>
</table>
</div>

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 %}
<p>Hello World</p>
<p>Hola Mundo</p>
{% endhighlight %}

This code is written with a **text editor**. You can see the tags `<p>` and `</p>` that stand for **paragraph**.
Este código está escrito con un **editor de texto**. Puedes ver las etiquetas `<p>`y `</p>` 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:

<div class="result">
<p>Hello World</p>
<p>Hola Mundo</p>
</div>

The browser sees the `<p>` and `</p>` tags and understands that `Hello World` is a **paragraph**.
El navegador ve las etiquetas `<p>` y `</p>` 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**
Expand All @@ -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.

0 comments on commit 5d1af80

Please sign in to comment.