initial commit

13 files changed, 1924 insertions, 0 deletions

diff --git a/files/es/learn/common_questions/cuanto_cuesta/index.html b/files/es/learn/common_questions/cuanto_cuesta/index.html
new file mode 100644
index 0000000000..aeffd72c64
--- /dev/null
+++ b/files/es/learn/common_questions/cuanto_cuesta/index.html
@@ -0,0 +1,162 @@
+---
+title: ¿Cuánto cuesta hacer algo en la Web?
+slug: Learn/Common_questions/Cuanto_cuesta
+tags:
+  - Comenzando
+  - Herramientas de desarrollo web
+  - Principiante
+  - alojamiento
+  - costo
+  - hosting
+translation_of: Learn/Common_questions/How_much_does_it_cost
+---
+<div class="summary">
+<p>Dedicarse a la web no es tan barato como parece. En este artículo discutimos cuánto puedes tener que gastar, y por qué.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Deberías ya entender <a href="/en-US/Learn/What_software_do_I_need">qué software necesitas</a>, la diferencia entre <a href="/en-US/Learn/page_vs_site_vs_server_vs_search_engine">una página web, un sitio web, etc</a>., y qué <a href="/en-US/Learn/Understanding_domain_names">es un nombre de dominio</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Examina el proceso completo para crear un sitio web y descubre cuánto te puede costar cada paso.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><span class="seoSummary">Al lanzar un sitio web, puedes no gastar nada, o puede que el costo sea muy elevado. En este artículo discutimos acerca de cuánto cuesta todo y cómo obtienes lo que pagas (o no pagas).</span></p>
+
+<h2 id="Software">Software</h2>
+
+<h3 id="Editores_de_texto">Editores de texto</h3>
+
+<p>Probablemente tienes un editor de texto: tal como Notepad en Windows, Gedit en Linux, TextEdit en Mac. Le resultará más fácil escribir código si elige un editor que coloree el código, chequee la sintaxis y te ayude a mantener la estructura del programa. </p>
+
+<p>Muchos editores son gratis, por ejemplo <a href="https://atom.io/">Atom</a>, <a href="http://brackets.io/">Brackets</a>, <a href="http://bluefish.openoffice.nl/">Bluefish</a>, <a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a>, <a href="http://eclipse.org/">Eclipse</a>, y <a href="https://netbeans.org/">Netbeans</a>. Algunos, como <a href="http://www.sublimetext.com/">Sublime Text</a>, los puedes probar tanto como quieras, pero se te anima a pagar. Otros, como <a href="https://www.jetbrains.com/phpstorm/">PhpStorm</a>, pueden costar entre unas pocas docenas y 200 dólares, en dependencia del plan que pague. Algunos de ellos, como <a href="http://www.visualstudio.com/">Microsoft Visual Studio</a>, pueden costar cientos o miles de dólares; aunque Visual Studio Express is gratis para desarrolladores individuales o proyectos de código abierto. A menudo, los editores pagados tienen una versión de prueba.</p>
+
+<p>Para comenzar, le segerimos probar con diferentes editores, para tener un indicio de cuál trabaja mejor para ti. Si está solamente escribiendo código simple de {{Glossary("HTML")}}, {{Glossary("CSS")}}, and {{Glossary("Javascript")}}, utilice un editor sencillo.</p>
+
+<p>El el precio no refleja de manera confiable la calidad o utilidad de un editor de texto. Tienes que probarlo por ti mismo y decidir si se ajusta a tus necesidades. Por ejemplo, Sublime Text es barato, pero tiene muhos plugins gratis que pueden extender su funcionalidad. </p>
+
+<h3 id="Editores_de_imágenes">Editores de imágenes</h3>
+
+<p>Tu sistema incluye seguramente un simple editor de imágenes, o visor: Paint en Windows, Eye of Gnome en Ubuntu, Preview en Mac. Estos programas son relativamente limitados, pronto gustarás tener un editor más potente para añadir capas, efectos y agrupamiento de imágenes.</p>
+
+<p>Los editores pueden ser gratis (<a href="http://www.gimp.org/">GIMP</a>, <a href="https://www.getpaint.net/">Paint.NET</a>), de costo moderado (<a href="http://www.paintshoppro.com/">PaintShop Pro</a>, menos de $100), o cientos de dólares (<a href="https://www.adobe.com/products/photoshop.html">Adobe Photoshop</a>).</p>
+
+<p>Puedes usar cualquiera de ellos, ya que tienen funciones similares, aunque algunos son tan completos que nunca vas a utilizar cada característica. Si en algún punto necesitas intercambiar proyectos con otros diseñadores, deberías descubrir qué herramientas utilizan. Los editores pueden exportar los proyectos finalizados a formatos de archivo estándares, pero cada editor guarda los proyectos actuales en su formato especializado. La mayoría de las imágenes en Internet están protegidas por los derechos de autor, por lo que es mejor chequear la licencia del aechivo antes de utilizarlo. Sitios como <a href="https://pixabay.com/">Pixabay</a> proporcionan imágenes bajo la licencia CC0, así que la puedes usar, editar y publicar incluso con modificaciones para uso comercial.</p>
+
+<h3 id="Editores_de_medios">Editores de medios</h3>
+
+<p>Si desea incluir video o audio en su sitio web, puede incrustar servicios online (por ejemplo YouTube, Vimeo, or Dailymotion), o incluir sus propios videos (ver más abajo los costos de ancho de banda).</p>
+
+<p>Para archivos de audio, puede encontrar software gratuito(<a href="http://audacity.sourceforge.net/?lang=en">Audacity</a>, <a href="http://www.wavosaur.com/">Wavosaur</a>), o pagar hasta unos poco cientos de dólares (<a href="http://www.sonycreativesoftware.com/soundforge">Sony Sound Forge</a>, <a href="http://www.adobe.com/products/audition.html">Adobe Audition</a>). Sin embargo, el software de edición de vídeo puede ser gratis (<a href="http://www.pitivi.org/">PiTiVi</a>, <a href="http://www.openshot.org/">OpenShot</a> for Linux, <a href="https://www.apple.com/mac/imovie/">iMovie</a> for Mac), menos de $100 (<a href="https://www.adobe.com/us/products/premiere-elements.html">Adobe Premiere Elements</a>), o varios cientos de dólares (<a href="https://www.adobe.com/products/premiere.html">Adobe Premiere Pro</a>, <a href="http://www.avid.com/US/products/family/Media-Composer">Avid Media Composer</a>, <a href="https://www.apple.com/final-cut-pro/">Final Cut Pro</a>). El software recibido con tu cámara digital puede cubrir todas tus necesidades.</p>
+
+<h3 id="Herramientas_de_publicación">Herramientas de publicación</h3>
+
+<p>Además necesitas una forma de subir archivos: desde tu disco duro a un servidor web distante. Para hacer esto deberías utilizar una herramienta de publicación tal como un cliente  (S)<a href="/en-US/docs/Glossary/FTP">FTP</a>, <a href="https://en.wikipedia.org/wiki/Rsync">RSync</a>, o <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">Git/GitHub</a>.</p>
+
+<p>Cada sistema operativo incluye un cliente (S)FTP, como parte de su administrador de archivos. Windows Explorer, Nautilus (un administrador de archivos común en Linux), y Mac Finder inclueyen todos esta funcionalidad. Sin embargo, las personas a menudo seleccionan clientes (S)FTP dedicados a mostrar directorios locales y remotos y almacenar contraseñas de servidor.</p>
+
+<p>Si desea instalar un cliente (S)FTP, existen varias opciones seguras y gratuitas: por ejemplo, <a href="https://filezilla-project.org/">FileZilla</a> para todas las plataformas, <a href="http://winscp.net/">WinSCP</a> para Windows, <a href="https://cyberduck.io/">Cyberduck</a> para Mac o Windows, <a href="https://en.wikipedia.org/wiki/List_of_FTP_server_software">y otros más</a>.</p>
+
+<p>Debido a que el protocolo FTP es inseguro, deberías asegurarte de utilizar SFTP — la versión segura, encriptada de FTP que la mayoría de los sitios de alojamiento (en inglés <em>hosting</em>) actuales ofrecen por defecto— u otra solución segura como Rsync sobre SSH.</p>
+
+<h2 id="Navegadores">Navegadores</h2>
+
+<p>Ya debes tener un navegador o puedes conseguirlo gratuito. Si lo necesitas, descarga Firefox <a href="https://www.mozilla.org/en-US/firefox/all/">aquí</a> o Google Chrome <a href="https://www.google.com/chrome/browser/">aquí</a>.</p>
+
+<h2 id="Acceso_a_la_web">Acceso a la web</h2>
+
+<h3 id="Computadora_módem">Computadora / módem</h3>
+
+<p>Necesitas una computadora. El costo puede variar mucho, en dependencia de tu presupuesto, y dónde vivas. Para publicar un sitio web básico, sólo necesitas una computadora básica capaz de ejecutar, por lo que el nivel de entrada puede ser bastante bajo. </p>
+
+<p>Por supuesto, necesitarás una computadora más formal si quieres producir diseños complicados, retocar fotos, o producir archivos de audio y vídeo. </p>
+
+<p>Necesitas subir contenido a un servidor remoto (ver <em>Alojamiento</em> más abajo), por lo que necesitas un módem.Tu proveedor {{Glossary("ISP")}} puede venderte la conexión a internet por unos pocos dólares al mes, aunque tu presupuesto pudiera variar, en dependencia de tu localización.</p>
+
+<h3 id="Acceso_del_Proveedor_ISP">Acceso del Proveedor ISP</h3>
+
+<p>Asegúrese de contar con suficiente {{Glossary("Ancho de banda", "ancho de banda")}}:</p>
+
+<ul>
+ <li>El acceso de ancho de banda bajo puede ser adecuado para soportar un sitio web simple: imágenes reducidas, textos, algunos archivos CSS y JavaScript. Esto probablemente te cueste unas pocas docenas de dólares, incluyendo la renta del módem.</li>
+ <li>De otra manera, necesitarás un ancho de banda superior, tal como acceso por DSL, cable, o fibra, si desea un sitio web más avanzado con cientos de archivos o quiere entregar archivos pesados de vídeo/audio directamente desde tu servidor. Te pudiera costar lo mismo que el acceso de ancho de banda bajo, hasta varios cientos de dólares mensuales para necesidades más profesionales. </li>
+</ul>
+
+<h2 id="Alojamiento">Alojamiento</h2>
+
+<h3 id="Entendiendo_el_ancho_de_banda">Entendiendo el ancho de banda</h3>
+
+<p>Los proveedores de alojamiento te cobran de acuerdo a cuánto {{Glossary("Ancho de banda", "ancho de banda")}} consume tu sitio web. . Esto depende de cuántas personaas, y robots de rastreo Web, accedan a tu contenido durante un tiempo dado, y cuánto espacio en el servidor tu contenido ocupa. Esta es la razón por la cual las personas usualmente almacenan sus videos en servicios dedicadostales como Youtube, Dailymotion, y Vimeo. Por ejemplo, tu proveedor puede tener un plan que incluye hasta varios miles de visitantes por díam por un uso “razonable”. Sea cuidadoso, puesto que puede variar mucho de un servidor de alojamiento a otro. Como regla de oro, reconozca que el servicio de alojamiento confiable, pagado y personal puede costar alrededor de 10 a 15 dólares al mes. </p>
+
+<div class="note">
+<p>Note que que no existe el ancho de banda “ilimitado”. Si consumes una enorme cantidad de ancho de banda, espere pagar una enorme cantidad de dinero.</p>
+</div>
+
+<h3 id="Nombre_de_dominio">Nombre de dominio</h3>
+
+<p>Su nombre de dominio tiene que ser comprado a través de un proveedor de nombres (un registrador). Tu proveedor de alojamiento puede además ser un registrador (por ejemplo <a href="https://www.1and1.com/">1&amp;1</a> y <a href="https://www.gandi.net/?lang=en">Gandi</a>  son al mismo tiempo registradores y proveedores de alojamiento). El nombre de dominio usualmente cuesta $5-15 por año. Este costo varía en dependencia de:</p>
+
+<ul>
+ <li>Obligaciones locales: algunos nombres de dominio de primer nivel pertenecientes a países son más costosos, ya que diferentes países establecen precios diferentes.</li>
+ <li>Servicios asociados con un nombre de dominio: algunos registradores proveen protección contra spam ocultando tu dirección postal y corre electrónico detrás de sus propias direcciones: la dirección postal puede ser proveída a cargo del registrador y tu dirección de correo puede ser ocultada detrás del alias de tu registrador. </li>
+</ul>
+
+<h3 id="Alojamiento_de_aficionados_vs._Alojamiento_“empaquetado”">Alojamiento de aficionados vs. Alojamiento “empaquetado”</h3>
+
+<p>Cuando deseas publicar un sitio web, puedes hacer todo por ti mismo: preparar una base de datos (si es necesaria), Sistema de Gestión de Contenidos, or {{Glossary("CMS")}} (como <a href="http://wordpress.org/">Wordpress</a>, <a href="http://dotclear.org/">Dotclear</a>, <a href="http://www.spip.net/en_rubrique25.html">spip</a>, etc.), subir tus propias plantillas o contenido preeditado.</p>
+
+<p>Pudieras utilizar el entorno de tu proveedor de alojamiento, por aproximadamente de 10 a 15 dólares al mes, o suscribirse directamente a un servicio de alojamiento con CMS pre-empaquetado (por ejemplo, <a href="http://wordpress.com/">Wordpress</a>, <a href="https://www.tumblr.com/">Tumblr</a>, <a href="https://www.blogger.com/">Blogger</a>). Para esta última no tienes que pagar nada, pero puedes tener menos control sobre las plantillas y otras opciones. </p>
+
+<h3 id="Alojamiento_gratuito_vs._alojamiento_pagado">Alojamiento gratuito vs. alojamiento pagado</h3>
+
+<p>Te pudieras preguntar, ¿por qué pago por mi alojamiento cuando existen tantos servicios gratuitos?</p>
+
+<ul>
+ <li>Tienes más libertad cuando pagas. Tu sitio web es tuyo, y puedes trasladarlo a la perfección de un proveedor de alojamiento a otro.</li>
+ <li>Los proveedores de alojamiento gratuito puede añadir anuncios Free hosting providers may add advertising to your content, beyond your control.</li>
+</ul>
+
+<p>Es mejor pagar el alojamiento que depender de alojamiento gratuito, ya que en la mayoría de los sitios pagados es posible trasladar tus archivos fácilmente y el tiempo de actividad está garantizado. La mayoría de los proveedores de alojamiento te dan un gran descuento para comenzar. </p>
+
+<p>Algunas personan optan por un enfoque mixto. Por ejemplo, su blog principal en un sitio pagado con un nombre de dominio completo, y a su vez contenido espóntaneo, menos estratégico en un servicio de alojamiento gratuito.</p>
+
+<h2 id="Agencias_y_alojamiento_de_sitios_web_profesionales">Agencias y alojamiento de sitios web profesionales</h2>
+
+<p>Si desea un sitio web profesional, probablemente le pedirás a una agencia web que lo haga por ti.<br>
+ <br>
+ Aquí, los costos dependen de múltiples factores, tales como: </p>
+
+<ul>
+ <li>¿Es este un sitio web sencillo con unas pocas páginas de texto? ¿O un sitio web más complejo con miles de extensas páginas?</li>
+ <li>¿Quieres actualizarlo de manera regular? ¿O será un sitio web estático?</li>
+ <li>¿Tu sitio web debe conectarse a tu compañía para obtener el contenido (es decir, datos internos)?</li>
+ <li>¿Quieres algunas características fanstásticas de las más usadas del momento? En el momento que se escribió este artículo, los clientes buscan sitios de página única con complicados paralajes (React).</li>
+ <li>¿Necesitarás que la agencia cree historias de usuarios o resuelva complejos problemas {{Glossary("UX")}}? Por ejemplo, crear una estrategia que atraiga usuarios, o pruebas A/B para seleccionar una solución entre diferentes ideas. </li>
+</ul>
+
+<p>...y para alojamiento:</p>
+
+<ul>
+ <li>¿Quieres servidores adicionales, en caso de que tu servidor se caiga?</li>
+ <li>¿Es 95% porciento adecuada la fiabilidad, o necesitas servicio profesional las 24 horas?</li>
+ <li>¿Quiere un gran perfil, servidores dedicados ultra-responsivos, o puede trabajar con una máquina más lenta compartida?</li>
+</ul>
+
+<p>En dependencia de cómo responda estas preguntas, su sitio pudiera costar miles hasta cientos de miles de dólares.</p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<p>Ahora que entiende que cantidad de dinero su sitio puede costarle, es tiempo de comenzar a diseñar un sitio web y <a href="/en-US/docs/Learn/Set_up_a_basic_working_environment">preparar su entorno de trabajo</a>.</p>
+
+<ul>
+ <li>Lea sobre <a href="/en-US/docs/Learn/Choose,_Install_and_set_up_a_text_editor">cómo seleccionar e instalar un editor de texto</a>.</li>
+ <li>SI está más enfocado en diseño, eche una mirada a la <a href="/en-US/Learn/Anatomy_of_a_web_page">anatomía de una página web</a>.</li>
+</ul>
diff --git a/files/es/learn/common_questions/diseños_web_comunes/index.html b/files/es/learn/common_questions/diseños_web_comunes/index.html
new file mode 100644
index 0000000000..7e05cbcaad
--- /dev/null
+++ b/files/es/learn/common_questions/diseños_web_comunes/index.html
@@ -0,0 +1,115 @@
+---
+title: ¿Qué contienen los diseños web comunes?
+slug: Learn/Common_questions/diseños_web_comunes
+tags:
+  - CSS
+  - Común
+  - Diseño
+  - Diseño Común
+  - HTML
+  - Principiante
+translation_of: Learn/Common_questions/Common_web_layouts
+---
+<div>{{IncludeSubnav("/en-US/Learn")}}</div>
+
+<div class="summary">
+<p>Cuando diseña páginas para su sitio web es bueno tener una idea de los diseños más comunes.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Asegúrese que usted ya ha pensado sobre <a href="/es/docs/Learn/Common_questions/Thinking_before_coding">lo que quiere lograr</a> con su proyecto web.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender dónde colocar las cosas en sus páginas web, y cómo hacerlo. </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Existe una razón para que hablemos sobre diseño web. Se comienza con una página en blanco, y se pueden tomar muchas direcciones. Si no tienes mucha experiencia, comenzar con una página en blanco pudiera ser un poco temible. Nosotros tenemos alrededor de 25 años de experiencia y te daremos algunas reglas básicas para ayudarte a diseñar tu sitio. </p>
+
+<p>Aún ahora con el nuevo enfoque de la web para móviles, la mayoría de las páginas web principales son construídas a partir de las siguientes partes:</p>
+
+<dl>
+ <dt>Encabezado</dt>
+ <dd>Visible en la parte superior de cada página de un sitio. Contiene información relevante para todas las páginas (como el nombre del sitio o el logo) y un sistema de navegación fácil de usar.</dd>
+ <dt>Contenido principal</dt>
+ <dd>Es el área más grande, contiene contenido único para la página actual.</dd>
+ <dt>Contenido secundario</dt>
+ <dd>1) Información complementaria del contenido principal; 2) información compartida entre un subconjunto de páginas; 3) sistema de navegación alternativo. De hecho, todo lo que no es absolutamente requerido por el contenido de la página principal. </dd>
+ <dt>Pie de página</dt>
+ <dd>Visible en la parte inferior de cada página de un sitio. Análogamente al encabezado contiene información global, en este caso menos llamativa como avisos legales o información de contacto.</dd>
+</dl>
+
+<p>Estos elementos son bastante comunes en todos los factores de forma, pero pueden ser dispuestos de diferentes maneras. Aquí se presentan algunos ejemplos (<strong>1 </strong>representa encabezado, <strong>2 </strong>pie de página; <strong>A </strong>contenido principal; <strong>B1, B2 </strong>barras laterales):</p>
+
+<p><strong>Diseño de una columna.</strong> Especialmente importante para navegadores de móviles de modo que no se llene la pequeña pantalla.</p>
+
+<p><img alt="Example of a 1 column layout: Main on top and asides stacked beneath it." src="https://mdn.mozillademos.org/files/9501/1-col-layout.png" style="height: 100px; width: 160px;"></p>
+
+<p><strong>Diseño de dos columnas.</strong> A menudo utilizado para tabletas, ya que tienen pantallas de tamaño medio.</p>
+
+<p> <img alt="Example of a basic 2 column layout: One aside on the left column, and main on the right column." src="https://mdn.mozillademos.org/files/9499/2-col-layout-right.png" style="height: 100px; width: 160px;"> <img alt="Example of a basic 2 column layout: One aside on the right column, and main on the left column." src="https://mdn.mozillademos.org/files/9497/2-col-layout-left.png" style="height: 100px; width: 160px;"></p>
+
+<p><strong>Diseños de tres columnas</strong>. Solamene adecuado para escritorios con pantallas grandes. (Incluso muchos usuarios de escritorio prefieren ver cosas en pequeñas ventanas que en pantalla completa.)</p>
+
+<p><img alt="Example of a basic 3 column layout: Aside on the left and right column, Main on the middle column." src="https://mdn.mozillademos.org/files/9491/3-col-layout.png" style="height: 100px; width: 160px;"> <img alt="Another example of a 3 column layout: Aside side by side on the left, Main on the right column." src="https://mdn.mozillademos.org/files/9493/3-col-layout-alt.png" style="height: 100px; width: 160px;"> <img alt="Another example of a 3 column layout: Aside side by side on the right, Main on the left column." src="https://mdn.mozillademos.org/files/9495/3-col-layout-alt2.png" style="height: 100px; width: 160px;"></p>
+
+<p>La verdadera diversión comienza cuando empiezas a mezclarlos todos juntos.</p>
+
+<p><img alt="Example of mixed layout: Main on top and asides beneath it side by side." src="https://mdn.mozillademos.org/files/9503/1-col-layout-alt.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: Main on the left column and asides stack on top of each other on the right column" src="https://mdn.mozillademos.org/files/9505/2-col-layout-left-alt.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: one aside on the left column and main in the right column with a aside beneath main." src="https://mdn.mozillademos.org/files/9507/2-col-layout-mix.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: Main on the left of the first row and one aside on the right of that same row, a second aside convering the whole second row." src="https://mdn.mozillademos.org/files/9509/2-col-layout-mix-alt.png" style="height: 100px; width: 160px;">…</p>
+
+<p>Estos son solo ejemplos y eres bastante libre de diseñar las cosas como quieras. Puedes notar que mientras el contenido se puede mover alrededor de la pantalla, siempre se mantiene el encabezado (1) en la parte superior y el pie de página (2) en la parte inferior. Además, el contenido principal (A) es lo más importante, así que dale la mayor parte del espacio. </p>
+
+<p>Estas son reglas del juego que puedes aprovechar. Desde luego, existen diseños complejos y excepciones. En otros artículos discutiremos cómo diseñar sitios responsivos (sitios que cambian en dependencia del tamaño de la pantalla) y sitios cuyos diseños varían entre las páginas. Por ahora, es mejor mantener tu diseño consistente en todo tu sitio. </p>
+
+<h2 id="Aprendizaje_activo">Aprendizaje activo</h2>
+
+<p><em>Aún no hay aprendizaje activo disponible. <a href="/en-US/docs/MDN/Getting_started">Por favor, considere contribuir</a>.</em></p>
+
+<h2 id="Profundización">Profundización</h2>
+
+<p>Estudiemos algunos ejemplos más concretos tomados de sitios web bien conocidos. </p>
+
+<h3 id="Diseño_de_una_columna">Diseño de una columna</h3>
+
+<p><strong><a href="http://www.invisionapp.com/" rel="external">Aplicación de Invision</a></strong>. Un diseño típico de una columna proporcionando toda la información linealmente en una sola página. </p>
+
+<p><img alt="Example of a 1 column layout in the wild" src="https://mdn.mozillademos.org/files/9523/screenshot-product.jpg" style="height: 643px; width: 200px;">        <img alt="1 column layout with header, main content, a stack of aside contents and a footer" src="https://mdn.mozillademos.org/files/9525/screenshot-product-overlay.jpg" style="height: 643px; width: 200px;"></p>
+
+<p>Bastante sencillo. Sólo recuerda que muchas personas navegarán por tu sitio desde escritorios, así que haz tu contenido también utilizable allí.</p>
+
+<h3 id="Diseño_de_dos_columnas.">Diseño de dos columnas.</h3>
+
+<p><strong><a href="http://abduzeedo.com/typography-mania-261" rel="external">Abduzeedo</a></strong>, un simple diseño de blog. Los blogs usualmente tienen dos columnas, una para el contenido principal que es más ancha y otra más estrecha para el contenido secundario (como widgets, niveles de navegación secundarios y anuncios). </p>
+
+<p><img alt="Example of a 2 column layout for a blog" src="https://mdn.mozillademos.org/files/9527/screenshot-blog.jpg" style="height: 643px; width: 200px;">        <img alt="A 2 column layout with the main content on the left column" src="https://mdn.mozillademos.org/files/9529/screenshot-blog-overlay.jpg" style="height: 643px; width: 200px;"></p>
+
+<p>En este ejemplo, mira la imagen (B1) justo debajo del encabezado. Está relacionada con el contenido principal, pero el contenido principal tiene sentido sin esta, de este modo pudieras pensar que la imagen forma parte del contenido principal o del lateral. En realidad no importa. Lo que importa es que si pones algo justo debajo del encabezado, debería ser parte del contenido principal o estar directamente relacionado con este. </p>
+
+<h3 id="Es_una_trampa">Es una trampa</h3>
+
+<p><strong><a href="http://www.mica.edu/About_MICA.html" rel="external">MICA</a></strong>. Este es un poco más complicado. Parece un diseño de tres columnas...</p>
+
+<p><img alt="Example of a false 3 columns layout" src="https://mdn.mozillademos.org/files/9531/screenshot-education.jpg" style="height: 267px; width: 200px;">        <img alt="It looks like a 3 columns layout but actually, the aside content is floating around." src="https://mdn.mozillademos.org/files/9533/screenshot-education-overlay.jpg" style="height: 267px; width: 200px;"></p>
+
+<p>...pero no lo es. B1 y B2 flotan alrededor del contenido principal. Recuerda esa palabra "float"--te acordarás cuando empieces a aprender sobre {{Glossary("CSS")}}.</p>
+
+<p>¿Por qué pensarías que es un diseño de tres columnas? Porque la imagen en la parte superior derecha está en forma de L, porque B1 parece una columna sosteniendo el conenido principal desplazado, y porque la "M" y la  "I" del logo MICA crean una línea de fuerza vertical.</p>
+
+<p>Este es un buen ejemplo de diseño clásico que admite cierta creatividad. Los diseños simples son más fáciles de implementar, pero deje espacio expresar su creatividad en el área.</p>
+
+<h3 id="Un_diseño_mucho_más_complicado">Un diseño mucho más complicado</h3>
+
+<p><strong>La <a href="https://www.operadeparis.fr/en/saison-2014-2015/opera/la-boheme-puccini" rel="external">Opera de Paris</a>.</strong></p>
+
+<p><img alt="An example of a tricky layout." src="https://mdn.mozillademos.org/files/9535/screenshot-opera.jpg" style="height: 424px; width: 200px;">        <img alt="This is a 2 column layout but the header is overlaping the main content." src="https://mdn.mozillademos.org/files/9537/screenshot-opera-overlay.jpg" style="height: 424px; width: 200px;"></p>
+
+<p>Básicamente un diseño de dos columnas, pero notarás muchos ajustes por aquí y por allá que rompen visualmente el diseño. Especialmente, el encabezado se superposiciona a la imagen del contenido principal. La manera en que la curva del menú del encabezado se une con la curva en el fondo de la imagen, hacen que el encabezado y el contenido principal parezcan un solo componente a pesar de que son técnicamente completamente distintos. </p>
+
+<p>Como ves, puedes crear maravillosos sitios web incluso sólo con diseños básicos. Échale una mirada a tus propios sitos web favoritos y pregúntate a ti mismo, ¿dónde está el encabezado, el pie de página, el contenido principal y el contenido secundario? Esto te inspirará para tu propio diseño y te dará buenas pistas sobre para cuáles diseños funciona y para cuáles no. </p>
diff --git a/files/es/learn/common_questions/how_does_the_internet_work/index.html b/files/es/learn/common_questions/how_does_the_internet_work/index.html
new file mode 100644
index 0000000000..238ea2e5ae
--- /dev/null
+++ b/files/es/learn/common_questions/how_does_the_internet_work/index.html
@@ -0,0 +1,99 @@
+---
+title: ¿Cómo funciona Internet?
+slug: Learn/Common_questions/How_does_the_Internet_work
+tags:
+  - Internet
+  - Principiante
+  - Tutorial
+  - Web
+translation_of: Learn/Common_questions/How_does_the_Internet_work
+---
+<div class="summary">
+<p>En este artículo se describe lo que es Internet y cómo funciona.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td>Ninguno, pero te animamos a leer el <a href="/en-US/docs/Learn/Thinking_before_coding">Artículo sobre el establecimiento de metas</a> primero.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprenderás lo básico de infraestructura técnica de la web y la diferencia entre Internet y Web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><strong>Internet</strong> es la columna vertebral de la Web, la infraestructura técnica que la hace posible. En lo más básico, Internet es una gran red de computadoras que se comunican simultáneamente.</p>
+
+<p><a href="http://en.wikipedia.org/wiki/Internet#History" rel="external">La historia de internet es algo oscura</a>. Comenzó en la década de 1960 como un proyecto de investigación financiado por el ejercito de los EE.UU, y luego se convirtió en una infraestructura pública en la década de 1980 con el apoyo de muchas universidades públicas y empresas privadas. Las distintas tecnologías que soporta internet han evolucionado con el tiempo, pero la forma en que funciona no ha cambiado mucho: Internet es una forma de conectar las computadoras entre sí y asegurar que, pase lo que pase, encuentren una manera de mantenerse conectadas.</p>
+
+<h2 id="Aprendizaje_activo">Aprendizaje activo</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc" rel="external">Cómo funciona internet explicado en 5 minutos</a>: Un vídeo de 5 minutos para entender los fundamentos de internet por Aaron Titus.</li>
+ <li><a href="https://www.youtube.com/watch?v=x3c1ih2NJEg">¿Cómo funciona Internet? </a>Video detallado de 8 minutos de visualización.</li>
+</ul>
+
+<h2 id="Profundizar">Profundizar</h2>
+
+<h3 id="Una_simple_red">Una simple red</h3>
+
+<p>Cuando dos ordenadores necesitan comunicarse, tienes que vincularlos, ya sea físicamente (por lo general con un <a href="http://en.wikipedia.org/wiki/Ethernet_crossover_cable" rel="external">cable de Ethernet</a>) o de forma inalámbrica (por ejemplo por <a href="http://en.wikipedia.org/wiki/WiFi" rel="external">WiFi</a> o sistema de <a href="http://en.wikipedia.org/wiki/Bluetooth" rel="external">Bluetooth</a>). Todos los ordenadores modernos pueden soportar cualquiera de este tipo de conexiones.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> En el resto de este artículo, sólo nos referiremos al uso de cables físicos, pero es igualmente aplicable a las redes inalámbricas.</p>
+</div>
+
+<p><img alt="Dos computadoras conectadas entre sí" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p>
+
+<p>La red no se limita a dos ordenadores, se pueden conectar tantos como se deseen aunque siendo más complicado cada vez. Por ejemplo, para conectar diez ordenadores, se necesitarían 45 cables y unos nueve conectores por ordenador!</p>
+
+<p><img alt="Diez ordenadores interconectados" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png"></p>
+
+<p>Para resolver este problema, cada ordenador en una red está conectado a una pequeña computadora especial llamada enrutador o router (en inglés). Este enrutador cumple una función: tal como hace un señalizador en una estación de tren, el router se encarga de asegurar que el mensaje enviado desde un ordenador emisor llegue al destino correcto. Para que el ordenador B reciba un mensaje desde el ordenador A, este debe enviarlo primero al router, quien a su vez lo remite al ordenador B asegurándose que dicho mensaje no sea entregado a otro ordenador C.</p>
+
+<p>Una vez que agregamos un enrutador al sistema, nuestra red de 10 ordenadores solo requiere 10 cables: un enchufe para cada ordenador y un enrutador con 10 enchufes.</p>
+
+<p><img alt="Diez ordenadores con un router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p>
+
+<h3 id="Una_red_de_redes">Una red de redes</h3>
+
+<p>Hasta aquí todo es más o menos simple, pero ¿qué sucede al conectar cientos, miles, millones de ordenadores entre sí?. Por supuesto un solo <em>enrutador</em> no puede escalar tanto, pero, si lees cuidadosamente, dijimos que un <em>enrutador</em> es como un pequeño ordenador, entonces ¿qué nos impide conectar dos <em>enrutadores </em>a la vez?. Nada: hagámoslo.</p>
+
+<p><img alt="Dos routers conectados entre sí" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p>
+
+<p>Conectando ordenadores a enrutadores y luego enrutadores entre sí, podemos escalar infinitamente.</p>
+
+<p><img alt="Routers interconectados" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p>
+
+<p>Una red así se acerca mucho a lo que llamamos Internet, pero hay algo que nos falta. Construimos esa red para nuestros propios propósitos. Hay otras redes ahí fuera: tus amigos, tus vecinos, cualquiera puede tener su propia red de ordenadores. Pero no es posible instalar cables entre tu casa y el resto del mundo, así que ¿cómo puedes manejar esto? Bueno, ya hay cables conectados a tu casa, por ejemplo, la energía eléctrica y el teléfono. La infraestructura telefónica ya conecta tu casa con cualquier persona en el mundo, así que es el cable perfecto que necesitamos. Para conectar nuestra red a la infraestructura telefónica, necesitamos un equipo especial llamado <em>modem</em>. Este <em>modem</em> convierte la información de nuestra red en información manejable por la infraestructura telefónica y viceversa.</p>
+
+<p><img alt="Un router conectado a un modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p>
+
+<p>Entonces estamos conectados a la infraestructura telefónica. El siguiente paso es enviar el mensaje desde nuestra red a la red que queremos llegar. Para lograr eso, conectaremos nuestra red a un proveedor de servicios de internet (ISP de sus siglas en inglés Internet Service Provider). Un ISP es una empresa que gestiona algunos enrutadores especiales interconectados, que también pueden acceder a enrutadores de otros ISP. Así, el mensaje de nuestra red es llevada a través de la red de redes de ISP, hasta la red de destino. Internet consiste en toda esta infraestructura de redes.</p>
+
+<p><img alt="stack de Internet al completo" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p>
+
+<h3 id="Encontrando_ordenadores">Encontrando ordenadores</h3>
+
+<p>Si deseas enviar un mensaje a una computadora, debes especificar a cuál. Es por ello que todo ordenador conectado a una red cuenta con una dirección única que lo identifica, llamada “dirección IP” o Protocolo de Internet(IP de sus siglas en inglés <em>Internet Protocol</em>). Esta dirección está compuesta por una serie de cuatro números separados por puntos, por ejemplo: <code>192.168.2.10</code>.</p>
+
+<p>Para los ordenadores es un identificador simple, pero los humanos tienen mayor dificultad a la hora de recordar y memorizar este tipo de dirección. Con el propósito de convertir esta serie numérica en algo que podamos asociar con mayor facilidad a la dirección IP se utiliza lo que conocemos como <em>nombre de dominio</em>. Por ejemplo, <code>google.com </code>es el nombre de dominio utilizado para sustituir la dirección IP <code>173.194.121.32</code>. Así, usar un nombre de dominio es la manera más fácil para nosotros de identificar un ordenador a través de Internet.</p>
+
+<p><img alt="Mostrar cómo un nombre de dominio sirve como alias a una dirección IP" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p>
+
+<h3 id="Internet_y_la_web">Internet y la web</h3>
+
+<p>Como puedes notar, cuando navegamos por la web con un navegador, normalmente utilizamos el nombre de dominio para llegar a un sitio web. ¿Significa eso que Internet y la Web son la misma cosa? No es tan simple. Como vimos, Internet es una infraestructura técnica que permite que miles de millones de ordenadores estén conectadas entre sí. Algunos de estos ordenadores, llamados <em>servidores web</em> son capaces de enviar mensajes inteligibles a los navegadores. Por tanto <em>Internet </em>es una infraestructura, mientras que la <em>Web</em> es un servicio construido sobre dicha infraestructura. Cabe señalar que existen otros servicios soportados por Internet, como es el correo electrónico e {{Glossary("IRC")}}.</p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<ul>
+ <li><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Cómo funciona la Web.</a></li>
+ <li><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">Comprender la diferencia entre una página web, un sitio web, un servidor web y un motor de búsqueda.</a></li>
+ <li><a href="/en-US/docs/Learn/Understanding_domain_names">La comprensión de los nombres de dominio.</a></li>
+</ul>
diff --git a/files/es/learn/common_questions/index.html b/files/es/learn/common_questions/index.html
new file mode 100644
index 0000000000..4dcdd63447
--- /dev/null
+++ b/files/es/learn/common_questions/index.html
@@ -0,0 +1,145 @@
+---
+title: Preguntas frecuentes
+slug: Learn/Common_questions
+tags:
+  - CodingScripting
+  - Infrastructure
+  - Learn
+  - NeedsTranslation
+  - TopicStub
+  - Web
+  - WebMechanics
+translation_of: Learn/Common_questions
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Esta sección del área de aprendizaje está diseñada para proveer respuestas a preguntas frecuentes que pueden surgir, las cuales no son necesariamente parte del núcleo  estructurado de formas de aprendizaje (ej. los artículos de aprendizaje de <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a> o <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a>). Éstos artículos están diseñados para trabajar por su cuenta.</p>
+
+<h2 id="Cómo_funciona_la_Web">Cómo funciona la Web</h2>
+
+<p>Esta sección cubre los mecanismos de la web -preguntas relativas al conocimiento general del ecosistema de la Web y cómo funciona.</p>
+
+<dl>
+ <dt>
+ <h3 id="¿Cómo_funciona_la_Web"><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">¿Cómo funciona la Web?</a></h3>
+ </dt>
+ <dd><strong>Internet </strong>es la columna vertebral de la Web, la infraestructura técnica que hace la Web posible. Básicamente, Internet es una gran red de ordenadores que se comunican todos entre sí. Este artículo explica cómo funciona, en un nivel básico.</dd>
+ <dt>
+ <h3 id="¿Cúal_es_la_diferencia_entre_página_web_sitio_web_servidor_web_y_motor_de_búsqueda"><a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">¿Cúal es la diferencia entre página web, sitio web, servidor web y motor de búsqueda?</a></h3>
+ </dt>
+ <dd>En este artículo se describen varios conceptos relacionados con la web: páginas web, sitios web, servidores web y motores de búsqueda. Estos términos son confundidos habitualmente por los novatos en la Web, o son incorrectamente usados. ¡ Vamos a aprender que significa cada uno de ellos !</dd>
+ <dt>
+ <h3 id="¿Qué_es_una_URL"><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">¿Qué es una URL?</a></h3>
+ </dt>
+ <dd>Con {{Glossary("Hypertext")}} y {{Glossary("HTTP")}}, URL es uno de los conceptos clave de la Web. Es el mecanismo usado por {{Glossary("Browser","browsers")}} para recoger cualquier recurso publicado en la Web.</dd>
+ <dt>
+ <h3 id="¿Qué_es_un_nombre_de_dominio"><a href="/en-US/docs/Learn/Common_questions/What_is_a_domain_name">¿Qué es un nombre de dominio?</a></h3>
+ </dt>
+ <dd>Los nombres de dominio son una parte clave de la infraestructura de Internet. Éstos proveen direcciones entendibles por humanos para cualquier servidor web disponible en Internet.</dd>
+ <dt>
+ <h3 id="¿Qué_es_un_servidor_web"><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">¿Qué es un servidor web?</a></h3>
+ </dt>
+ <dd>El término "servidor Web" puede referirse a hardware o software que sirve sitios web a clientes de la Web - o a ambos trabajando conjuntamente. En este artículo veremos cómo funcionan los servidores web, y por qué son importantes.</dd>
+ <dt>
+ <h3 id="¿Qué_son_los_hipervínculos"><a href="/en-US/docs/Learn/Common_questions/What_are_hyperlinks">¿Qué son los hipervínculos?</a></h3>
+ </dt>
+ <dd>En este artículo, veremos qué son los hipervínculos y por qué importan.</dd>
+</dl>
+
+<h2 id="Herramientas_y_Organización"><strong>Herramientas y Organización</strong></h2>
+
+<p>Preguntas relacionadas con las herramientas/software que puedes usar para hacer páginas web.</p>
+
+<dl>
+ <dt>
+ <h3 id="¿Cúanto_cuesta_hacer_algo_en_la_web"><a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">¿Cúanto cuesta hacer algo en la web?</a></h3>
+ </dt>
+ <dd>Cuando tú vas a lanzar un sitio web, no deberías malgastar nada de tus costes. En este artículo explicamos cuánto cuesta todo y qué consigues por lo que estás pagando (o no pagando).</dd>
+ <dt>
+ <h3 id="¿Qué_programas_necesito_para_crear_un_sitio_web"><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">¿Qué programas necesito para crear un sitio web?</a></h3>
+ </dt>
+ <dd>En este artículo explicamos qué componentes software necesitas para editar, subir o ver un sitio web.</dd>
+ <dt>
+ <h3 id="¿Qué_editores_hay_disponibles"><a href="/en-US/docs/Learn/Common_questions/Available_text_editors">¿Qué editores hay disponibles?</a></h3>
+ </dt>
+ <dd>En este artículo nos centramos en algunas cosas para reflexionar cuando elegimos e instalamos un editor de texto para el desarrollo web.</dd>
+</dl>
+
+<dl>
+ <dt>
+ <h3 id="¿Qué_son_las_herramientas_de_desarrollador_del_navegador"><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">¿Qué son las herramientas de desarrollador del navegador?</a></h3>
+ </dt>
+ <dd>Todos los navegadores proveen un set de herramientas de desarrollo para depurar HTML, CSS y otros códigos web. Este artículo explica cómo usar las funciones básicas de herramientas de desarrollador de tu navegador.</dd>
+</dl>
+
+<dl>
+ <dt>
+ <h3 id="¿Cómo_configuro_un_ambiente_de_trabajo_básico"><a href="/en-US/docs/Learn/Common_questions/Set_up_a_basic_working_environment">¿Cómo configuro un ambiente de trabajo básico?</a></h3>
+ </dt>
+ <dd>Cuado trabaje en un proyecto web, querrá probarlo localmente antes de mostrarlo al mundo. Alguno tipos de código requieren un servidor para probarlos, y en este artículo le mostraremos cómo configurar uno. También cubriremos cómo implementar una estructura escalable para que sus archivos se mantengan organizados, incluso cuando su proyecto crezca.</dd>
+ <dt>
+ <h3 id="¿Cómo_se_asegura_de_que_su_sitio_web_funciona_correctamente"><a href="/en-US/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">¿Cómo se asegura de que su sitio web funciona correctamente?</a></h3>
+ </dt>
+ <dd>Así que ha publicado su sitio web en línea, ¡muy bien! ¿Pero estás seguro de que funciona correctamente? Este artículo proporciona algunos pasos básicos para la solución de problemas.</dd>
+ <dt>
+ <h3 id="¿Cómo_se_configura_un_servidor_local_de_pruebas"><a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">¿Cómo se configura un servidor local de pruebas?</a></h3>
+ </dt>
+ <dd>
+ <div>
+ <p>Este artículo explica cómo configurar un servidor local de pruebas simple en su máquina y los conceptos básicos sobre cómo usarlo.</p>
+ </div>
+ </dd>
+ <dt>
+ <h3 id="¿Cómo_subir_archivos_a_un_servidor_web"><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">¿Cómo subir archivos a un servidor web?</a></h3>
+ </dt>
+ <dd>Este artículo muestra cómo publicar su sitio en línea con herramientas FTP, una de las formas más comunes de obtener un sitio web en línea para que otros puedan acceder a él desde sus computadoras.</dd>
+ <dt>
+ <h3 id="¿Cómo_uso_las_páginas_de_GitHub"><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">¿Cómo uso las páginas de </a><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">GitHub?</a></h3>
+ </dt>
+ <dd>Este artículo proporciona una guía básica para publicar contenido utilizando la función gh-pages de GitHub.</dd>
+ <dt>
+ <h3 id="¿Cómo_alojar_tu_sitio_web_en_Google_App_Engine"><a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">¿Cómo alojar tu sitio web en Google App Engine?</a></h3>
+ </dt>
+ <dd>¿Buscas un lugar donde alojar tu sitio web? Aquí hay una guía paso a paso para alojar tu sitio web en Google App Engine.</dd>
+ <dt>
+ <h3 id="¿Qué_herramientas_están_disponibles_para_depurar_y_mejorar_el_rendimiento_del_sitio_web"><a href="/en-US/docs/Tools/Performance">¿Qué herramientas están disponibles para depurar y mejorar el rendimiento del sitio web?</a></h3>
+ </dt>
+ <dd>Este conjunto de artículos le muestra cómo utilizar las herramientas de desarrollo en Firefox para depurar y mejorar el rendimiento de su sitio web, utilizando las herramientas para comprobar el uso de la memoria, el árbol de nodos de JavaScript, la cantidad de nodos que se renderizan en el DOM y más.</dd>
+</dl>
+
+<h2 id="Diseño_y_accesibilidad">Diseño y accesibilidad</h2>
+
+<p>Esta sección enlista preguntas relacionadas con la estética, estructura de páginas, técnicas de accesibilidad, etc.</p>
+
+<dl>
+ <dt>
+ <h3 id="¿Cómo_empiezo_a_diseñar_mi_sitio_web"><a href="/en-US/docs/Learn/Common_questions/Thinking_before_coding">¿Cómo empiezo a diseñar mi sitio web?</a></h3>
+ </dt>
+ <dd>Este artículo cubre el primer paso más importante de cada proyecto: definir lo que desea lograr con él.</dd>
+ <dt>
+ <h3 id="¿Qué_contienen_los_diseños_web_comunes"><a href="/en-US/docs/Learn/Common_questions/Common_web_layouts">¿Qué contienen los diseños web comunes?</a></h3>
+ </dt>
+ <dd>Al diseñar páginas para su sitio web, es bueno tener una idea de los diseños más comunes. Este artículo recorre algunos diseños web típicos, observando las partes que componen cada uno.</dd>
+ <dt>
+ <h3 id="¿Qué_es_la_accesibilidad"><a href="/en-US/docs/Learn/Common_questions/What_is_accessibility">¿Qué es la accesibilidad?</a></h3>
+ </dt>
+ <dd>Este artículo introduce los conceptos básicos detrás de la accesibilidad web.</dd>
+ <dt>
+ <h3 id="¿Cómo_podemos_diseñar_para_todo_tipo_de_usuarios"><a href="/en-US/docs/Learn/Common_questions/Design_for_all_types_of_users">¿Cómo podemos diseñar para todo tipo de usuarios?</a></h3>
+ </dt>
+ <dd>Este artículo proporciona técnicas básicas para ayudarlo a diseñar sitios web para todo tipo de usuario —la accesibilidad rápida gana y otras cosas.</dd>
+ <dt>
+ <h3 id="¿Qué_características_HTML_promueven_la_accesibilidad"><a href="/en-US/docs/Learn/Common_questions/HTML_features_for_accessibility">¿Qué características HTML promueven la accesibilidad?</a></h3>
+ </dt>
+ <dd>Este artículo describe características específicas de HTML que pueden ser utilizadas para hacer una página web más accesible para personas con diferentes discapacidades.</dd>
+</dl>
+
+<h2 id="Preguntas_de_HTML_CSS_y_JavaScript">Preguntas de HTML, CSS y JavaScript</h2>
+
+<p>Para soluciones a problemas comunes de HTML/CSS/JavaScript, trata con los siguientes artículos.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Usa HTML para solucionar problemas comunes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Howto">Usa CSS para solucionar problemas comunes</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Howto">Usa JavaScript para solucionar problemas comunes</a></li>
+</ul>
diff --git a/files/es/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/es/learn/common_questions/pages_sites_servers_and_search_engines/index.html
new file mode 100644
index 0000000000..741efd415d
--- /dev/null
+++ b/files/es/learn/common_questions/pages_sites_servers_and_search_engines/index.html
@@ -0,0 +1,119 @@
+---
+title: >-
+  ¿Cuál es la diferencia entre la página web, el sitio web, el servidor web y el
+  motor de búsqueda?
+slug: Learn/Common_questions/Pages_sites_servers_and_search_engines
+translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines
+---
+<div class="summary">
+<p><span class="seoSummary">En este artículo describe varios conceptos referidos a la web: Páginas web, sitios web, servidores web, y motores de búsqueda. Estos términos con frecuencia son confundidos por recién llegados a la web, o son incorrectamente usados. Vamos a aprender que significa de cada uno!</span></p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Debes saber <a href="/en-US/Learn/How_the_Internet_works">¿Cómo funciona internet?</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectivo:</th>
+   <td>Aprender la diferencia entre página web, un sitio web, un servidor web, y un motor de búsqueda.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Así como en cualquier área de conocimiento, la web viene con un montón de jerga. No te preocupes, no te abrumaremos con todo esto (tenemos un glosario por si tienes curiosidad). Sin embargo, hay un unos términos básicos que necesitas entender al principio, Ya que escuchará estas expresiones todo el tiempo mientras lee. A veces es fácil de confundir estos términos, puesto que hacen referencia a funcionalidades relacionadas pero diferentes. De hecho, a veces veras estos términos mal utilizados en las noticias y en otros lugares, por lo que llegar mezclarlos es entendible!</p>
+
+<p>Cubriremos estos términos y tecnologías con más detalle mientras exploramos más, pero estas definiciones rápidas serán un gran comienzo para ti:</p>
+
+<dl>
+ <dt>Página web</dt>
+ <dd> Un documento que se puede mostrar en un navegador web como Firefox, Google Chrome, Microsoft Internet Explorer o Edge, o Safary de Apple, A menudo también se puede denominar "páginas web" o simplemente "páginas".</dd>
+ <dt>Sitio web</dt>
+ <dd>Es una colección de páginas web que se agrupan y normalmente se conectan de varias maneras. A menudo llamado un "sitio web" o simplemente "sitio".</dd>
+ <dt>Servidor web</dt>
+ <dd>Una computadora que aloja un sitio web en Internet.</dd>
+ <dt>Motores de búsqueda</dt>
+ <dd>Un sitio web que te ayuda a encontrar páginas web, como Google, Bing o Yahoo o DuDuckGo. Normalmente se accede a los motores de búsqueda a través de un navegador web (por ejemplo, puede realizar búsquedas de motores en búsqueda directamente en la barra de direcciones de Firefox, Chrome, etc.) </dd>
+ <dt><br>
+ Veamos una analogía simple: una biblioteca pública. Esto es lo que generalmente harías al visitar una biblioteca:</dt>
+</dl>
+
+<ol>
+ <li>Buscar en un índice de busqueda el título del libro que quiéres.</li>
+ <li>Tomar nota del número de catálogo del libro.</li>
+ <li>Ir a la sección particular que contiene el libro, buscár el número de catálogo del libro y obtener el libro.</li>
+</ol>
+
+<p>Vamos a comparar la biblioteca con un servidor web:</p>
+
+<ul>
+ <li>La biblioteca es como un servidor web. Tiene varias secciones, que es similar a un servidor web que aloja varios sitios web.</li>
+ <li>Las diferentes secciones (ciencias, matemáticas, historia, etc.) en la biblioteca son como sitios web. Cada sección es como un sitio web único (dos secciones no contienen los mismos libros).</li>
+ <li>Los libros en cada sección son como páginas web. Un sitio web puede tener varias páginas web, por ejemplo, la sección de Ciencias (el sitio web) tendrá libros sobre calor, sonido, termodinámica, estadísticas, etc. (las páginas web). Las páginas web se pueden encontrar en una ubicación única (URL).</li>
+ <li>El índice de búsqueda es como el motor de búsqueda. Cada libro tiene su propia ubicación única en la biblioteca (dos libros no se pueden mantener en el mismo lugar) que se especifica mediante el número de catálogo.</li>
+</ul>
+
+<dl>
+</dl>
+
+<p><em>No esta disponible aprendizaje activo aun. <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">Por favor, considere la posibilidad de contribuir</a>.</em></p>
+
+<h2 id="Profundizando">Profundizando</h2>
+
+<p>Entonces, vamos a profundizar en cómo estos cuatro términos serán relacionados y por qué a veces se confunden entre sí.</p>
+
+<h3 id="Página_web">Página web</h3>
+
+<p>Una <strong>página web</strong> es un simple documento que puede ser mostrado por un {{Glossary("browser")}}. Estos documentos están escritos en lenguaje {{Glossary("HTML")}} (el que veremos en más detalle en <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">otros artículos</a>). Una página web puede incluir una variedad de diferentes tipos de recursos, tales como:</p>
+
+<ul>
+ <li><em>información de estilos</em> — controlar la apariencia de una página</li>
+ <li><em>scripts</em> — que agrega interactividad a la página</li>
+ <li><em>medios</em> — imágenes, sonidos, y vídeos.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota: </strong>los buscadores pueden mostrar otros tipos de documentos como archivos {{Glossary("PDF")}} o imágenes, pero el término <strong>página web</strong>específicamente hace referencia a documentos HTML. Por otro lado solo usamos el termino <strong>document</strong>(documento).</p>
+</div>
+
+<p>Todas las páginas web disponibles en la red son accesibles mediante una dirección única. Para acceder a una página, simplemente escribe su direcciones en la barra de búsqueda de tu navegador:</p>
+
+<p style="text-align: center;"><img alt="Example of a web page address in the browser address bar" src="https://mdn.mozillademos.org/files/8529/web-page.jpg" style="height: 239px; width: 650px;"></p>
+
+<p>Un <em>sitio web</em> es una colección de páginas web vinculadas (más sus recursos asociados) que comparten un único nombre de dominio. Cada página web de un sitio web determinado proporciona enlaces explícitos—la mayoría del tiempo en forma de parte del texto que se puede hacer clic—que permite al usuario moverse de una página del sitio a otra.</p>
+
+<p>Para acceder a un sitio web, escribe su nombre su dominio en la barra de direcciones de tu buscador, y el mostrará la página principal del sitio web, o <em>homepage </em>(casualmente denominada "el home"):</p>
+
+<p><img alt="Example of a web site domain name in the browser address bar" src="https://mdn.mozillademos.org/files/8531/web-site.jpg" style="display: block; height: 365px; margin: 0px auto; width: 650px;"></p>
+
+<p><em>Página web y</em> <em>sitio web </em>son especialmente fácil de confundir cuando un <em>sitio </em>contiene una única <em>página web </em>Tales sitio son denominados <em>sitios de una sola página.</em></p>
+
+<h3 id="Servidor_web">Servidor web</h3>
+
+<p>Un <em>servidor web</em> es una computadora que aloja uno o mas <em>sitios web</em>. “Alojar” significa que todas las <em>páginas web </em> y sus archivos soportes están disponibles en esa computadora. El <em>servidor web</em> enviará cualquier <em>página web</em> desde el <em>sitio</em> que hospeda al navegador de cualquier usuario, por cada solicitud del usuario.</p>
+
+<p>No confundir <em>sito web</em> y <em>servidor web</em>. Por ejemplo, "Mi sitio web no responde", en realidad significa que el <em>servidor web</em> no responde y , por lo tanto, el <em>sitio web</em> no está disponible. Más importante aún, ya que un servidor web puede alojar varios sitios web, el término <em>servidor web</em> nunca se utiliza para designar un sitio, ya que podría causar un gran confusión. En nuestro ejemplo anterior, si dijimos: "Mi servidor web no responde", significa que no hay sitios web en ese servidor web disponibles.</p>
+
+<h3 id="Buscador">Buscador</h3>
+
+<p>Los buscadores son una fuente común de confusión en la web. Un buscador es un tipo especial de sitio web que ayuda a los usuarios a encontrar páginas web de sitios web.</p>
+
+<p>Hay muchos por ahí: <a href="https://www.google.com/">Google</a>, <a href="https://www.bing.com/">Bing</a>, <a href="https://www.yandex.com/">Yandex</a>, <a href="https://duckduckgo.com/">DuckDuckGo</a>,y muchos mas. Algunos son genéricos, otros están especializados en ciertos temas. Utilice los que prefiera.</p>
+
+<p>Muchos principiantes en la web confunden motores de búsqueda con navegadores. Aclaremos esto: Un <em><strong>navegador</strong></em> es una parte de software que devuelve y muestra páginas web; un <strong><em>buscador</em></strong> es un sitio web que ayuda a las personas a encontrar páginas web de otros sitios web. La confusión surge porque, la primera vez que alguien inicia un navegador, el navegador muestra la página principal del motor. Esto tiene sentido, porque, obviamente, lo primero que quieres hacer con un navegador es encontrar una página web para mostrar. No confundas la infraestructura (por ejemplo, el navegador) con el servicio (por ejemplo, el buscador). La distinción te ayudará un poco, pero incluso algunos profesionales hablan imprecisamente, así que no te sientas angustiado por eso.</p>
+
+<p>Aquí hay una instancia de Firefox que muestra un cuadro de búsqueda de Google como su página de inicio predeterminada:</p>
+
+<p><img alt="Example of Firefox nightly displaying a custom Google page as default" src="https://mdn.mozillademos.org/files/8533/search-engine.jpg" style="display: block; height: 399px; margin: 0px auto; width: 650px;"></p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<ul>
+ <li>Profundizar más: <a href="/en-US/docs/Learn/What_is_a_web_server">Qué es un servidor Web</a></li>
+ <li>Vea cómo las páginas web están enlazadas en un sitio web: <a href="/en-US/docs/Learn/Understanding_links_on_the_web">Entendiendo los enlaces en la web</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/es/learn/common_questions/que_es_un_servidor_web/index.html b/files/es/learn/common_questions/que_es_un_servidor_web/index.html
new file mode 100644
index 0000000000..4969677db6
--- /dev/null
+++ b/files/es/learn/common_questions/que_es_un_servidor_web/index.html
@@ -0,0 +1,120 @@
+---
+title: Que es un servidor WEB?
+slug: Learn/Common_questions/Que_es_un_servidor_WEB
+tags:
+  - Infraestructura
+  - Principiante
+  - necesitaEsquema
+translation_of: Learn/Common_questions/What_is_a_web_server
+---
+<div class="summary">
+<p>En este articulo veremos que son los servidores, cómo funcionan y por qué son importantes.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td>Debes saber <a href="/en-US/docs/Learn/How_the_Internet_works">como funciona internet</a>, y <a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">entendiendo la diferencia entre pagina web, sitio web, servidor y motor de busqueda</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender qué es un servidor web y comprender cómo funciona.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sumario">Sumario</h2>
+
+<p>Con "Servidor web" podemos referirnos a hardware o software, o a ambos trabajando juntos.</p>
+
+<ol>
+ <li>En cuanto a hardware, un servidor web es una computadora que almacena los archivos que componen un sitio web (ej.  documentos HTML , imágenes, hojas de estilos CSS y archivo JavaScript) y los entrega al dispositivo del usuario final. Está conectado a internet y es accesible a través de un nombre de dominio como<code> mozilla.org</code>.</li>
+ <li>En cuanto a software, un servidor web tiene muchas partes encargadas del control sobre cómo tienen acceso los usuarios a los archivos, por lo menos un servidor <em>HTTP. </em>Un servidor HTTP es una pieza de software que comprende {{Glossary("URL","URLs")}} (direcciones web) y {{Glossary("HTTP")}} (el protocolo que tu navegador usa para ver las páginas web).</li>
+</ol>
+
+<p>Al nivel más básico, siempre que un navegador necesite un archivo almacenado en un  servidor web, el navegador hará una solicitud al servidor mediante la vía HTTP. Cuando la petición llega al servidor web correcto (hardware), el  servidor <em>HTTP </em> (software) envía el archivo antes solicitado, tambien a través de HTTP.</p>
+
+<p><img alt="Basic representation of a client/server connection through HTTP" src="https://mdn.mozillademos.org/files/8659/web-server.svg" style="height: 200px; width: 600px;"></p>
+
+<p>Para publicar un sitio web, necesitarás un servidor web dinámico o estático.</p>
+
+<p>Un <strong>servidor web estático</strong>, o pila, consiste en una computadora (hardware) con un servidor HTTP (software). Llamamos a este "estático" debido a que el servidor envía los archivos almacenados "tal cual" a tu navegador.</p>
+
+<p>Un <strong>servidor web dinámico </strong>consiste en un servidor web estático con un software extra , lo común es que sea una <em>aplicación</em> servidor <em> y una </em> base de datos<em>. Llamamos a esto</em> "dinámico" por que la aplicacion servidor actualiza los archivos almacenados en la base de datos antes de enviarlos mediante el servidor HTTP.</p>
+
+<p>Por ejemplo, para ver la página que ves en tu navegador finalmente, el servidor aplicación puede mostrar el diseño HTML con contenido desde una base de datos. Sitios como MDN o Wikipedia tienen cientos de páginas web, que no son realmente archivos HTML, si no una estrucura HTML asociada a una gigantesca base de datos. Esto hace mas fácil y rápido el mantenimiento y entrega del contenido.</p>
+
+<h2 id="Aprendizaje_activo">Aprendizaje activo</h2>
+
+<p><em>No hay aprendizaje activo disponible. <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">P</a><u>or favor, considere colaborar.</u></em></p>
+
+<h2 id="Inmersión_más_profunda">Inmersión más profunda</h2>
+
+<p>Para recuperar una página web, como ya dijimos, su navegador envía una solicitud al servidor web, que procede a buscar el archivo solicitado en su propio espacio de almacenamiento. Al encontrar el archivo, el servidor lo lee, lo procesa según sea necesario y lo envía al navegador. Veamos esos pasos con más detalle.</p>
+
+<h3 id="Alojamiento_de_archivos_Hosting">Alojamiento de archivos (Hosting)</h3>
+
+<p>Un servidor web primero debe almacenar los archivos del sitio web, es decir, todos los documentos HTML y sus medios relacionados, incluidas las imágenes, las hojas de estilo CSS, los archivos JavaScript, las fuentes y videos.</p>
+
+<p>Técnicamente, puede alojar todos esos archivos en su propia computadora, pero es mucho más conveniente almacenarlos en un servidor web dedicado que:</p>
+
+<ul>
+ <li>siempre está funcionando.</li>
+ <li>siempre está conectado a internet.</li>
+ <li>tiene la misma dirección IP todo el tiempo.</li>
+ <li>es mantenido por un proveedor externo.</li>
+</ul>
+
+<p>Por todas estas razones, encontrar un buen proveedor de alojamiento es una parte clave del desarrollo de su sitio web. Investigue a través de los diversos servicios que ofrecen las compañías y elija uno que se ajuste a sus necesidades y a su presupuesto (los servicios van desde los gratuitos hasta los miles de dólares al mes). Puede encontrar mas información <a href="https://developer.mozilla.org/en-US/Learn/How_much_does_it_cost#Hosting">en este artículo</a>.</p>
+
+<p>Una vez que configura una solución de alojamiento web, solo tiene que <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">cargar sus archivos en su servidor web</a>.</p>
+
+<h3 id="Comunicación_a_través_de_HTTP">Comunicación a través de HTTP</h3>
+
+<p>En segundo lugar, un servidor web brinda soporte para HTTP (<strong>H</strong>yper<strong>t</strong>ext <strong>T</strong>ransfer <strong>P</strong>rotocol ó  <span>Protocolo de Transferencia de Hipertexto</span>). <span class="tlid-translation translation"><span title="">Como su nombre lo indica, HTTP especifica cómo transferir hypertext (es decir, documentos web vinculados) entre dos computadoras.</span></span></p>
+
+<p>Un <em>protocolo </em> es un conjunto de reglas para la comunicación entre dos computadoras. HTTP es un protocolo textual, sin estado.</p>
+
+<dl>
+ <dt>Textual</dt>
+ <dd>Todos los comandos son de texto plano y legible para ser leído por humanos.</dd>
+ <dt><span class="tlid-translation translation"><span class="alt-edited" title="">Sin estado</span></span></dt>
+ <dd>Ni el servidor ni el cliente recuerdan las comunicaciones anteriores. Por ejemplo, al confiar solo en HTTP, un servidor no puede recordar la contraseña que ingresó ni el paso que está realizando en una transacción. Necesita un servidor de aplicaciones para tareas como esa. (Cubriremos ese tipo de tecnología en otros artículos).</dd>
+</dl>
+
+<p>HTTP proporciona reglas claras sobre cómo se comunican un cliente y un servidor. Cubriremos el propio HTTP en un <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">artículo técnico</a> más adelante. Por ahora, sólo sé consciente de estas cosas:</p>
+
+<ul>
+ <li>Solo los clientes pueden hacer solicitudes HTTP a los servidores. Los servidores solo pueden responder a la solicitud HTTP de un cliente.</li>
+ <li>Al solicitar un archivo a través de HTTP, los clientes deben proporcionar la URL del archivo.</li>
+ <li>El servidor web debe responder a todas las solicitudes HTTP, al menos con un mensaje de error.</li>
+</ul>
+
+<p><a href="https://developer.mozilla.org/en-US/404"><img alt="The MDN 404 page as an example of such error page" src="https://mdn.mozillademos.org/files/8661/mdn-404.jpg" style="float: right; height: 300px; width: 300px;"></a> En un servidor web, el servidor HTTP es responsable de procesar y responder las solicitudes entrantes.</p>
+
+<ol>
+ <li>Al recibir una solicitud, un servidor HTTP primero verifica si la URL solicitada coincide con un archivo existente.</li>
+ <li>Si es así, el servidor web envía el contenido del archivo de nuevo al navegador. Si no, un servidor de aplicaciones construye el archivo necesario.</li>
+ <li>Si ninguno de los procesos es posible, el servidor web devuelve un mensaje de error al navegador, generalmente "404 Not Found". ( Ese error es tan común que muchos diseñadores web pasan bastante tiempo diseñando páginas de error 404.)</li>
+</ol>
+
+<h3 id="Contenido_Estático_vs._Dinámico">Contenido Estático vs. Dinámico</h3>
+
+<p><span class="tlid-translation translation"><span title="">En términos generales, un servidor puede entregar contenido estático o dinámico.</span> <span title="">"Estático" significa "servido como está".</span> <span title="">Los sitios web estáticos son los más fáciles de configurar, por lo que le sugerimos que convierta su primer sitio en un sitio estático.</span></span></p>
+
+<p>"Dinámico" significa que el servidor procesa el contenido o incluso lo genera desde una base de datos. Esta solución proporciona más flexibilidad, pero se vuelve más difícil de manejar, lo que hace que sea mucho más complejo desarrollar el sitio web.</p>
+
+<p>Tomemos por ejemplo la página que estás leyendo en este momento. En el servidor web que lo aloja, hay un servidor de aplicaciones que toma el contenido del artículo de una base de datos, lo formatea, lo coloca dentro de algunas plantillas HTML y le envía los resultados. En este caso, el servidor de aplicaciones se llama <a href="/en-US/docs/MDN/Kuma">Kuma </a>y está desarrollado con Python (utilizando el framework <a href="https://www.djangoproject.com/">Django</a>). El equipo de Mozilla creó Kuma para las necesidades específicas de MDN, pero hay muchas aplicaciones similares basadas en otras tecnologías.</p>
+
+<p><span class="tlid-translation translation"><span title="">Hay tantos servidores de aplicaciones que es resulta difícil sugerir uno en particular.</span></span> <span class="tlid-translation translation"><span title="">Algunos servidores de aplicaciones se adaptan a categorías específicas de sitios web como blogs, wikis o tiendas electrónicas;</span></span> <span class="tlid-translation translation"><span title="">otros, llamados</span></span> CMS (Content Management Systems ó <span class="tlid-translation translation"><span title="">Sistemas de Gestión de Contenidos</span></span>), <span class="tlid-translation translation"><span title="">son más genéricos.</span></span> <span class="tlid-translation translation"><span title="">Si está desarrollando un sitio web dinámico, tómese el tiempo para elegir una herramienta que se adapte a sus necesidades.</span></span> <span class="tlid-translation translation"><span title="">A menos que desee aprender algo de programación de servidores web</span></span> (¡es un área emocionante!), no necesita crear su propio servidor de aplicaciones.</p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<p>Ahora que estás familiarizado con los servidores web, podrías:</p>
+
+<ul>
+ <li>leer sobre<a href="/en-US/docs/Learn/How_much_does_it_cost"> cuánto cuesta hacer algo en la web</a></li>
+ <li>consultar otros artículos relacionados con<a href="/en-US/docs/Learn/What_software_do_I_need">los diferentes software que puedes utilizar para crear un sitio web</a></li>
+ <li>pasar a algo práctico tipo: <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">¿cómo subir archivos al servidor?</a>.</li>
+</ul>
diff --git a/files/es/learn/common_questions/que_software_necesito/index.html b/files/es/learn/common_questions/que_software_necesito/index.html
new file mode 100644
index 0000000000..92687e7d13
--- /dev/null
+++ b/files/es/learn/common_questions/que_software_necesito/index.html
@@ -0,0 +1,226 @@
+---
+title: ¿Qué software necesito para construir un sitio web?
+slug: Learn/Common_questions/Que_software_necesito
+tags:
+  - Build a website
+  - Building
+  - Mecanismos Web
+  - Principiante
+  - software
+translation_of: Learn/Common_questions/What_software_do_I_need
+---
+<div class="summary">
+<p>En este artículo se explican cuales componentes de software necesita para editar, cargar, o visualizar un sitio web. </p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Deberías conocer acerca de <a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">la diferencia entre páginas web, sitios web, servidores web, y moteres de búsqueda.</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender qué componentes de software necesita si quiere editar, cargar o visualizar un sitio web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><span class="seoSummary">Puede descargar la mayoría de los programas que necesita para el desarrollo web de forma gratuita. Proporcionaremos unos enlaces en este artículo. </span></p>
+
+<p><span class="seoSummary">Necesitarás herramientas para:</span></p>
+
+<ul>
+ <li><span class="seoSummary">Crear y editar páginas web </span></li>
+ <li><span class="seoSummary">Cargar archivos a tu servidor web</span></li>
+ <li><span class="seoSummary">Visualizar tu servidor web</span></li>
+</ul>
+
+<p><span class="seoSummary">Casi todos los sistemas operativos incluyen por defecto un editor de texto y un navegador, el cual puedes usar para ver los sitios web. Como resultado, usualmente sólo necesitas adquirir software para la transferencia de archivos a tu servidor web.</span></p>
+
+<h2 id="Aprendizaje_activo">Aprendizaje activo</h2>
+
+<p><em>No hay aprendizaje activo disponible todavía. <a href="/es/docs/MDN/Comenzando">Por favor, considere contribuir</a>.</em></p>
+
+<h2 id="Profundización">Profundización</h2>
+
+<h3 id="Creción_y_edición_de_páginas_web">Creción y edición de páginas web</h3>
+
+<p>Para crear y editar un sitio web, necesita un editor de texto. Editores de texto crean y modifican archivos de texto sin formato.  Otros formatos, como <strong>{{Glossary("RTF")}}</strong>, te permiten añadirle formato, como negrita y señalado, esos no son adecuados para escribir páginas web. Debe pensar bien qué editor de texto usar, ya que trabajará intensamente con él mientras construye el sitio web.</p>
+
+<p>Todos los sistemas operativos de escritorio traen un editor de texto básico. Estos editores son muy sencillos, pero les faltan características especiales para codificar páginas web. Si desea algo un poco más elegante, hay muchas herramientas de terceros disponibles. Editores de terceros, a menudo viene con características extra, como coloreado de sintaxis, autocompletado, secciones expandibles y búsqueda de código. A continuación se muestra una lista de algunos editores:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Sistema operativo</th>
+   <th scope="col">Editor incorporado</th>
+   <th scope="col">Editor de terceros</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Windows</td>
+   <td>
+    <ul>
+     <li><a href="http://en.wikipedia.org/wiki/Notepad_%28software%29" rel="external">Notepad</a></li>
+    </ul>
+   </td>
+   <td>
+    <ul>
+     <li><a href="http://notepad-plus-plus.org/">Notepad++</a></li>
+     <li><a href="https://www.visualstudio.com/">Visual Studio Code</a></li>
+     <li><a href="https://www.jetbrains.com/webstorm/">Web Storm</a></li>
+     <li><a href="http://brackets.io/">Brackets</a></li>
+     <li><a href="https://shiftedit.net/">ShiftEdit</a></li>
+     <li><a href="https://www.sublimetext.com/">Sublime Text</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Mac OS</td>
+   <td>
+    <ul>
+     <li><a href="http://en.wikipedia.org/wiki/TextEdit" rel="external">TextEdit</a></li>
+    </ul>
+   </td>
+   <td>
+    <ul>
+     <li><a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a></li>
+     <li><a href="https://www.visualstudio.com/">Visual Studio Code</a></li>
+     <li><a href="http://brackets.io/">Brackets</a></li>
+     <li><a href="https://shiftedit.net/">ShiftEdit</a></li>
+     <li><a href="https://www.sublimetext.com/">Sublime Text</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Linux</td>
+   <td>
+    <ul>
+     <li><a href="http://en.wikipedia.org/wiki/Vi" rel="external">Vi</a> (All UNIX)</li>
+     <li><a href="http://en.wikipedia.org/wiki/Gedit" rel="external">GEdit</a> (Gnome)</li>
+     <li><a href="http://en.wikipedia.org/wiki/Kate_%28text_editor%29" rel="external">Kate</a> (KDE)</li>
+     <li><a href="http://en.wikipedia.org/wiki/Leafpad" rel="external">LeafPad</a> (Xfce)</li>
+    </ul>
+   </td>
+   <td>
+    <ul>
+     <li><a href="http://www.gnu.org/software/emacs/">Emacs</a></li>
+     <li><a href="http://www.vim.org/" rel="external">Vim</a></li>
+     <li><a href="https://www.visualstudio.com/">Visual Studio Code</a></li>
+     <li><a href="http://brackets.io/">Brackets</a></li>
+     <li><a href="https://shiftedit.net/">ShiftEdit</a></li>
+     <li><a href="https://www.sublimetext.com/">Sublime Text</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Chrome OS</td>
+   <td> </td>
+   <td>
+    <ul>
+     <li><a href="https://shiftedit.net/">ShiftEdit</a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Aquí se muestra una captura de pantalla de un editor de texto avanzado:</p>
+
+<p><img alt="Screenshot of Notepad++." src="https://mdn.mozillademos.org/files/8221/NotepadPlusPlus.png" style="display: block; height: 311px; margin: 0 auto; width: 450px;"> </p>
+
+<p>Esta es una captura de panalla de un editor de texto online:</p>
+
+<p><img alt="Screenshot of ShiftEdit" src="https://mdn.mozillademos.org/files/15837/shiftedit.png" style="display: block; height: 311px; margin: 0 auto; width: 475px;"></p>
+
+<h3 id="Subir_archivos_a_la_Web">Subir archivos a la Web</h3>
+
+<p>Cuando tu sitio web está listo para visualización pública , tendrás que subir tus páginas web a tu servidor web. Puedes comprar espacio en un servidor de varios proveedores (vea el artículo <a class="new" href="/en-US/docs/Learn/How_much_does_it_cost">¿Cuánto cuesta hacer algo en la web?</a>). Una vez que establezca qué proveedor utilizar, el proveedor le enviará un correo con la información de acceso, usualmente en la forma de una URL SFTP, nombre de usuario, contraseña, y otra información necesaria para conectarte con su servidor. Tenga en cuenta que el protocolo (S)FTP está actualmente algo pasado de moda, mientras otros sistemas de carga de archivos están comenzando a volverse populares como <a href="https://en.wikipedia.org/wiki/Rsync">RSync</a> y <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">Git/GitHub</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note: </strong>FTP es inherentemente inseguro. Deberías asegurarte de que tu proveedor de alojamiento permite el uso de una conexión segura, por ejemplo SFTP o RSync sobre SSH.</p>
+</div>
+
+<p>Subir archivos a un sitio web es un paso muy importante mientras se crea un sitio web, por lo que sete tema se abarca en detalle en <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">un artículo aparte</a>. Por ahora, se presenta una lista de clientes (S)FTP gratuitos:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Sistema operativo</th>
+   <th colspan="2" rowspan="1" scope="col" style="text-align: center;"> Software FTP </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Windows</td>
+   <td>
+    <ul>
+     <li><a href="http://winscp.net" rel="external">WinSCP</a></li>
+     <li><a href="http://mobaxterm.mobatek.net/">Moba Xterm</a></li>
+    </ul>
+   </td>
+   <td colspan="1" rowspan="3">
+    <ul>
+     <li><a href="https://filezilla-project.org/">FileZilla</a> (Todos los SO)</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Linux</td>
+   <td>
+    <ul>
+     <li><a href="https://wiki.gnome.org/action/show/Apps/Files?action=show&amp;redirect=Apps%2FNautilus" rel="external">Nautilus/Files</a> (Gnome)</li>
+     <li><a href="http://dolphin.com/" rel="external">Dolphin</a> (KDE)</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td> Mac OS</td>
+   <td>
+    <ul>
+     <li><a href="http://cyberduck.de/">Cyberduck</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td> Chrome OS</td>
+   <td>
+    <ul>
+     <li><a href="https://shiftedit.net/">ShiftEdit</a> (Todos los SO)</li>
+    </ul>
+   </td>
+   <td colspan="1"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Navegación_por_sitios_web">Navegación por sitios web</h3>
+
+<p>Como ya sabe, necesita un navegador para ver los sitios web. Existen <a href="http://en.wikipedia.org/wiki/List_of_web_browsers">docenas</a>  de opciones de navegadores para uso personal, pero cuando usted está desarrollando un sitio web debe probarlo al menos con los navegadores principales siguientes, para estar seguro de que su sitio web funciona para la mayoría de las personas:  </p>
+
+<ul>
+ <li><a href="https://www.mozilla.org/en-US/firefox/new/" rel="external">Mozilla Firefox</a></li>
+ <li><a href="https://www.google.fr/chrome/browser/" rel="external">Google Chrome</a></li>
+ <li><a href="http://windows.microsoft.com/en-US/internet-explorer/download-ie" rel="external">Microsoft Internet Explorer</a></li>
+ <li><a href="http://www.apple.com/safari/" rel="external">Apple Safari</a></li>
+</ul>
+
+<p>Si su sitio está destinado a un grupo específico (por ejemplo, una plataforma técnica o país), puede que tenga que probar el sitio con navegadores adicionales, como <a href="http://www.opera.com/" rel="external">Opera</a>, <a href="http://www.konqueror.org/">Konqueror</a>, o<a href="http://www.ucweb.com/ucbrowser/" rel="external"> UC Browser</a>.</p>
+
+<p>Sin embargo las pruebas se dificultan debido a que algunos navegadores sólo funcionan en determinados sistemas operativos. Apple Safari se ejecuta en iOS y Mac OS, mientras Internet Explorer corre solamente en Windows. Lo mejor es aprovechar los servicios como <a href="http://browsershots.org/" rel="external">Browsershots</a> o <a href="http://www.browserstack.com/" rel="external">Browserstack</a>. Browsershots proporciona capturas de pantallas de tu sitio web en diferentes navegadores. Browserstack  realmente te otorga acceso remoto a máquinas virtuales de modo que puedes probar tu sitio en los entornos más comunes. De manera alternativa, puedes instalar tu propia máquina virtual, pero se necesita algo de experiencia. ( Si escoge este camino, Microsoft tiene algunas herramientas para desarrolladores incluso una máquina virtual lista para utilizar en <a href="https://modern.ie" rel="external">modern.ie</a>.)</p>
+
+<p>Sin falta ejecute algunas pruebas en dispositivos reales, especialmente en dispositivos móviles reales. Simulación de dispositivos móviles es una tecnología nueva, en evolución y menos confiable que la simulación de escritorio. Desde luego, los dispositivos móviles son costosos, por lo que le sugerimos echar un vistazo a <a href="http://opendevicelab.com/" rel="external">la inictiva de Laboratorios de dispositivos abiertos</a>. Puede además compartir dispositivos quiere probar en diferentes plataformas sin gastar mucho.</p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<ul>
+ <li>Algunos de estos programas son gratis, pero no todos. <a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">Descubra cuánto cuesta hacer algo en la web</a><a class="new" href="/en-US/docs/Learn/How_much_does_it_cost">.</a></li>
+ <li>Si desea aprrender más sobre editores de texto, lea este artículo acerca de <a href="/en-US/docs/Learn/Choose,_Install_and_set_up_a_text_editor">cómo seleccionar e instalar un editor de texto</a>.</li>
+ <li>Si se está preguntando cómo publicar en tu sitio web, eche un vistazo a <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">"Cómo subir archivos a un servidor web"</a>.</li>
+</ul>
+
+<p> </p>
diff --git a/files/es/learn/common_questions/qué_es_una_url/index.html b/files/es/learn/common_questions/qué_es_una_url/index.html
new file mode 100644
index 0000000000..ef50be60ad
--- /dev/null
+++ b/files/es/learn/common_questions/qué_es_una_url/index.html
@@ -0,0 +1,152 @@
+---
+title: ¿Qué es una URL?
+slug: Learn/Common_questions/Qué_es_una_URL
+translation_of: Learn/Common_questions/What_is_a_URL
+---
+<div class="summary">
+<p>Este artículo habla sobre las Uniform Resource Locators (URLs), explicando qué son y cómo se estructuran.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td>Primero necesitas saber <a href="/en-US/docs/Learn/How_the_Internet_works">Como funciona Internet</a>, <a href="/en-US/docs/Learn/What_is_a_Web_server">qué es un servidor Web</a> y <a href="/en-US/docs/Learn/Understanding_links_on_the_web">los conceptos detrás de los enlaces en la web</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprenderás lo que es una URL y como funcionan en la Web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><span class="seoSummary">Junto con el {{Glossary("Hypertext", "Hipertexto")}} y {{Glossary("HTTP")}}, las <strong><dfn>URL</dfn></strong> son uno de los conceptos claves de la Web. Es el mecanismo usado por los {{Glossary("Browser","navegadores")}} para obtener cualquier recurso publicadon en la web.</span></p>
+
+<p><strong>URL</strong> significa <em>Uniform Resource Locator (Localizador de Recursos Uniforme)</em>. Una URL no es más que una direccion que es dada a un recurso único en la Web. En teoria, cada URL valida apunta a un único recurso. Dichos recursos pueden ser páginas HTML, documentos CSS, imagenes, etc. En la practica, hay algunas excepciones, siendo la más común una URL apuntando a un recurso que ya no existe o que ha sido movido. Como el recurso representado por la URL y la URL en si son manejadas por el servidor Web, depende del dueño del servidor web manejar ese recurso y su URL asociada adecuadamente.</p>
+
+<h2 id="Active_Learning">Active Learning</h2>
+
+<p><em>There is no active learning available yet. <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p>
+
+<h2 id="Profundizando">Profundizando</h2>
+
+<h3 id="Conceptos_básicos_anatomía_de_una_URL">Conceptos básicos: anatomía de una URL</h3>
+
+<p>Aquí hay algunos ejemplos de URL:</p>
+
+<pre class="notranslate">https://developer.mozilla.org
+https://developer.mozilla.org/en-US/docs/Learn/
+https://developer.mozilla.org/en-US/search?q=URL</pre>
+
+<p>Cualquiera de esas URL se puede escribir en la barra de direcciones de su navegador para indicarle que cargue la página (recurso) asociada.</p>
+
+<p>Una URL está compuesta de diferentes partes, algunas obligatorias y otras opcionales. Veamos las partes más importantes usando la siguiente URL:</p>
+
+<pre class="notranslate">http://www.example.com:80/path/to/myfile.html?key1=value1&amp;key2=value2#SomewhereInTheDocument</pre>
+
+<dl>
+ <dt><img alt="Protocol" src="https://mdn.mozillademos.org/files/15766/mdn-url-protocol@x2_update.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>http</code> es el protocolo. La primera parte de la URL indica qué protocolo debe usar el navegador. Un protocolo es un método establecido para intercambiar o transferir datos alrededor de una red informática. Por lo general, para sitios web es el protocolo HTTP o su versión segura, HTTPS. La Web requiere uno de estos dos, pero los navegadores también saben cómo manejar otros protocolos como mailto: (para abrir un cliente de correo) o ftp: para manejar la transferencia de archivos, así que no se sorprenda si ve tales protocolos.</dd>
+ <dt><img alt="Domaine Name" src="https://mdn.mozillademos.org/files/8015/mdn-url-domain@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>www.example.com</code> es el nombre de dominio. Indica qué servidor web se solicita. Alternativamente, es posible usar directamente un {{Glossary("dirección IP")}}, pero debido a que es menos conveniente, no se usa con frecuencia en la Web.</dd>
+ <dt><img alt="Port" src="https://mdn.mozillademos.org/files/8017/mdn-url-port@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>:80</code> es el puerto. Indica la "puerta" técnica utilizada para acceder a los recursos en el servidor web. Por lo general, se omite si el servidor web utiliza los puertos estándar del protocolo HTTP (80 para HTTP y 443 para HTTPS) para otorgar acceso a sus recursos. De lo contrario es obligatorio.</dd>
+ <dt><img alt="Path to the file" src="https://mdn.mozillademos.org/files/8019/mdn-url-path@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>/path/to/myfile.html</code> es la ruta al recurso en el servidor web. En los primeros días de la Web, una ruta como esta representaba la ubicación de un archivo físico en el servidor web. Hoy en día, es principalmente una abstracción manejada por servidores web sin ninguna realidad física.</dd>
+ <dt><img alt="Parameters" src="https://mdn.mozillademos.org/files/8021/mdn-url-parameters@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>?key1=value1&amp;key2=value2</code> son parámetros adicionales proporcionados al servidor web. Esos parámetros son una lista de pares clave/valor separados con el símbolo &amp;. El servidor web puede usar esos parámetros para hacer cosas adicionales antes de devolver el recurso. Cada servidor web tiene sus propias reglas con respecto a los parámetros, y la única forma confiable de saber si un servidor web específico está manejando parámetros es preguntando al propietario del servidor web.</dd>
+ <dt><img alt="Anchor" src="https://mdn.mozillademos.org/files/8023/mdn-url-anchor@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>#SomewhereInTheDocument</code> es un ancla para otra parte del recurso en sí. Un ancla representa una especie de "marcador" dentro del recurso, dando al navegador las instrucciones para mostrar el contenido ubicado en ese lugar "marcado". En un documento HTML, por ejemplo, el navegador se desplazará hasta el punto donde se define el ancla; en un video o documento de audio, el navegador intentará ir a la hora que representa el ancla. Vale la pena señalar que la parte después del #, también conocido como el identificador de fragmento, nunca se envía al servidor con la solicitud.</dd>
+</dl>
+
+<p>{{Note('Existen <a href="http://en.wikipedia.org/wiki/Uniform_Resource_Locator">algunas partes extras y reglas extras </a>con respecto a las URL, pero no son relevantes para usuarios habituales o desarrolladores web. No se preocupe por esto, no necesita conocerlos para construir y usar URL completamente funcionales.')}}</p>
+
+<p>Puede pensar en una URL como una dirección de correo postal normal: el protocolo representa el servicio postal que desea utilizar, el nombre de dominio es la ciudad o el pueblo y el puerto es como el código postal; la ruta representa el edificio donde se debe entregar su correo; los parámetros representan información adicional como el número de apartamento en el edificio; y, finalmente, el ancla representa a la persona real a la que ha dirigido su correo.</p>
+
+<h3 id="Cómo_usar_las_URL">Cómo usar las URL</h3>
+
+<p>Se puede escribir cualquier URL dentro de la barra de direcciones del navegador para acceder al recurso que se encuentra detrás. ¡Pero esto es sólo la punta del iceberg!</p>
+
+<p>El lenguaje {{Glossary("HTML")}} — <a href="/en-US/docs/Learn/HTML/HTML_tags">que se discutirá más adelante</a> — hace un uso extensivo de las URL:</p>
+
+<ul>
+ <li>para crear enlaces a otros documentos con el elemento {{HTMLElement("a")}};</li>
+ <li>para vincular un documento con sus recursos relacionados a través de varios elementos como {{HTMLElement("link")}} o {{HTMLElement("script")}};</li>
+ <li>para mostrar recursos como imágenes (con el elemento {{HTMLElement("img")}}), videos (con el elemento {{HTMLElement("video")}}), sonido y música (con el elemento {{HTMLElement("audio")}} ), etc.;</li>
+ <li>para mostrar otros documentos HTML con el elemento {{HTMLElement ("iframe")}}.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota:</strong> Al especificar URL para cargar recursos como parte de una página (como cuando se usa &lt;script&gt;, &lt;audio&gt;, &lt;img&gt;, &lt;video&gt; y similares), solo debe usar URL HTTP y HTTPS. El uso de FTP, por ejemplo, no es particularmente seguro y muchos navegadores ya no lo admiten.</p>
+</div>
+
+<p>Otras tecnologías, como {{Glossary("CSS")}} o {{Glossary("JavaScript")}}, usan URLs ampliamente, y estos son realmente el corazón de la Web.</p>
+
+<h3 id="URL_absolutas_vs_URL_relativas">URL absolutas vs URL relativas</h3>
+
+<p>Lo que vimos arriba se llama URL absoluta, pero también hay algo llamado URL relativa. Examinemos lo que significa esa distinción con más detalle.</p>
+
+<p>Las partes requeridas de una URL dependen en gran medida del contexto en el que se utiliza la URL. En la barra de direcciones de su navegador, una URL no tiene ningún contexto, por lo que debe proporcionar una URL completa (o absoluta), como las que vimos anteriormente. No necesita incluir el protocolo (el navegador usa HTTP de manera predeterminada) o el puerto (que solo se requiere cuando el servidor web de destino está utilizando algún puerto inusual), pero todas las otras partes de la URL son necesarias.</p>
+
+<p>Cuando se usa una URL dentro de un documento, como en una página HTML, las cosas son un poco diferentes. Debido a que el navegador ya tiene la propia URL del documento, puede usar esta información para completar las partes faltantes de cualquier URL disponible dentro de ese documento. Podemos diferenciar entre una URL absoluta y una URL relativa mirando solo la parte de ruta de la URL. Si la parte de ruta de la URL comienza con el carácter "/", el navegador buscará ese recurso desde la raíz superior del servidor, sin referencia al contexto dado por el documento actual.</p>
+
+<p>Veamos algunos ejemplos para aclarar esto.</p>
+
+<h4 id="Ejemplos_de_URL_absolutas">Ejemplos de URL absolutas</h4>
+
+<dl>
+ <dt>URL Completa (la misma que usamos antes)</dt>
+ <dd>
+ <pre class="notranslate">https://developer.mozilla.org/en-US/docs/Learn</pre>
+ </dd>
+ <dt>Protocolo implícito</dt>
+ <dd>
+ <pre class="notranslate">//developer.mozilla.org/en-US/docs/Learn</pre>
+
+ <p>En este caso, el navegador llamará a esa URL con el mismo protocolo que el utilizado para cargar el documento que aloja esa URL.</p>
+ </dd>
+ <dt>Nombre de dominio implícito</dt>
+ <dd>
+ <pre class="notranslate">/en-US/docs/Learn</pre>
+
+ <p>Este es el caso de uso más común para una URL absoluta dentro de un documento HTML. El navegador utilizará el mismo protocolo y el mismo nombre de dominio que el utilizado para cargar el documento que aloja esa URL. <strong>Nota</strong>: <em>no es posible omitir el nombre de dominio sin omitir también el protocolo</em>.</p>
+ </dd>
+</dl>
+
+<h4 id="Ejemplos_de_URL_relativas">Ejemplos de URL relativas</h4>
+
+<p>Para comprender mejor los siguientes ejemplos, supongamos que las URL se invocan desde el documento ubicado en la siguiente URL:<code>https://developer.mozilla.org/en-US/docs/Learn</code></p>
+
+<dl>
+ <dt>Sub-recursos</dt>
+ <dd>
+ <pre class="notranslate">Skills/Infrastructure/Understanding_URLs
+</pre>
+ Debido a que la URL no se inicia con <code>/</code>, el navegador intentará encontrar el documento en un subdirectorio del que contiene el recurso actual. Entonces, en este ejemplo, realmente queremos llegar a esta URL:<code>https://developer.mozilla.org/en-US/docs/Learn/Skills/Infrastructure/Understanding_URLs</code></dd>
+ <dt>Volviendo en el árbol de directorios</dt>
+ <dd>
+ <pre class="notranslate">../CSS/display</pre>
+
+ <p>En este caso, usamos el <code>../</code> convención de escritura, heredada del mundo del sistema de archivos UNIX, para decirle al navegador que queremos subir desde un directorio. Aquí queremos llegar a esta URL:<code>https://developer.mozilla.org/en-US/docs/Learn/../CSS/display</code>, que se puede simplificar a: <code>https://developer.mozilla.org/en-US/docs/CSS/display</code></p>
+ </dd>
+</dl>
+
+<h3 id="URL_semánticas">URL semánticas</h3>
+
+<p>A pesar de su sabor muy técnico, las URL representan un punto de entrada legible para un sitio web. Se pueden memorizar y cualquiera puede ingresarlos en la barra de direcciones de un navegador. Las personas están en el centro de la Web, por lo que se considera una buena práctica construir lo que se llama <a href="http://en.wikipedia.org/wiki/Semantic_URL"><em>URL semánticas</em></a>. Las URL semánticas usan palabras con un significado inherente que cualquier persona puede entender, independientemente de sus conocimientos técnicos.</p>
+
+<p>La semántica lingüística es, por supuesto, irrelevante para las computadoras. Probablemente has visto URL que parecen mashups de caracteres aleatorios. Pero hay muchas ventajas en la creación de URL legibles por humanos:</p>
+
+<ul>
+ <li>Es más fácil para ti manipularlos.</li>
+ <li>Aclara las cosas para los usuarios en términos de dónde están, qué están haciendo, qué están leyendo o interactuando en la Web.</li>
+ <li>Algunos motores de búsqueda pueden usar esa semántica para mejorar la clasificación de las páginas asociadas.</li>
+</ul>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Understanding_domain_names">Comprendiendo nombres de dominio</a></li>
+</ul>
diff --git a/files/es/learn/common_questions/set_up_a_local_testing_server/index.html b/files/es/learn/common_questions/set_up_a_local_testing_server/index.html
new file mode 100644
index 0000000000..e2223d3c8a
--- /dev/null
+++ b/files/es/learn/common_questions/set_up_a_local_testing_server/index.html
@@ -0,0 +1,113 @@
+---
+title: ¿Cómo se configura un servidor de prueba local?
+slug: Learn/Common_questions/set_up_a_local_testing_server
+tags:
+  - Expreso
+  - Flask
+  - Lado-del-servidor
+  - Node
+  - PHP
+  - Principiante
+  - Python
+  - aprende
+  - django
+  - lamp
+  - servidores
+translation_of: Learn/Common_questions/set_up_a_local_testing_server
+---
+<div class="summary">
+<p>En este artículo explica cómo configurar un servidor de prueba local simple en su equipo y los conceptos básicos de cómo utilizarlo.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Primero debes saber <a href="/en-US/docs/Learn/How_the_Internet_works">cómo funciona internet</a>, y <a href="/en-US/docs/Learn/What_is_a_Web_server">qué es un servidor web</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectivo:</th>
+   <td>Aprenderás cómo configurar un servidor de pruebas local</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Archivos_locales_versus_archivos_remotos">Archivos locales versus archivos remotos</h2>
+
+<p>En la mayor parte del área de aprendizaje, te decimos que abras tus ejemplos directamente en un navegador — lo que se hace con doble clic en el archivo HTML, o arrastrándolo y soltándolo en una ventana del navegador o eligiendo <em>Archivo</em> &gt; <em>Abrir...</em> y navegando al archivo HTML, etc. Hay muchas maneras de lograr esto.</p>
+
+<p>Sabes si estás ejecutando el ejemplo desde un archivo local porque la dirección web tendrá <code>archivo://</code> al principio, seguido de la ruta al archivo en tu disco duro local. Por el contrario, si ves uno de nuestros ejemplos alojados en GitHub (o un ejemplo en algún otro servidor remoto), la dirección web tendrá <code>http://</code> o <code>https://</code> al principio, para mostrar que el archivo ha sido recibido a través de HTTP.</p>
+
+<h2 id="El_problema_de_probar_archivos_locales">El problema de probar archivos locales</h2>
+
+<p>Algunos ejemplos no se ejecutarán si los abre como archivos locales. Esto puede deberse a una variedad de razones, siendo las más probables:</p>
+
+<ul>
+ <li><strong>Cuentan con peticiones asincrónicas</strong>. Algunos navegadores (incluido chrome) no ejecutarán solicitudes asíncronas (consulte <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Obtención de datos desde el servidor</a>) si acaba de ejecutar el ejemplo desde un archivo local. Esto se debe a las restricciones de seguridad (para obtener más información sobre la seguridad web, lee <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">La seguridad del sitio web</a>).</li>
+ <li><strong>Cuenta con un lenguaje de servidor</strong>. Los lenguajes de servidor (como PHP o Python) requieren de un servidor especial para interpretar el código y entregar los resultados.</li>
+</ul>
+
+<h2 id="Ejecutando_un_servidor_HTTP_local_simple">Ejecutando un servidor HTTP local simple</h2>
+
+<p>Para evitar el problema de las solicitudes asíncronas, necesitamos probar estos ejemplos ejecutándolos a través de un servidor web local. Una de las maneras más fáciles de hacer esto para nuestros propósitos es usar el módulo <code>SimpleHTTPServer</code> de Python.</p>
+
+<p>Para hacer esto:</p>
+
+<ol>
+ <li>
+  <p>Instalar Python. Si usas Linux o Mac OS X, ya debe estar disponible en tu sistema. Si eres usuario de Windows, puedes conseguir un instalador desde la página principal de Python y seguir las instrucciones para instalarlo:</p>
+
+  <ul>
+   <li>Vé a <a href="https://www.python.org/">python.org</a></li>
+   <li>Debajo de la sección de Descarga, haz clic en el link para Python "3.xxx".</li>
+   <li>En la parte superior de la página, selecciona el <em>instalador ejecutable windows x86</em> y descárgalo.</li>
+   <li>Cuando se haya descargado, córrelo.</li>
+   <li>En la primera página de instalación, asegúrate de marcar el checkbox "Añadir Python 3.xxx a la ruta"</li>
+   <li>Clic en <em>Instalar</em>, luego clic en <em>Cerrar</em> cuando la instalación ya haya finalizado.</li>
+  </ul>
+ </li>
+ <li>
+  <p>Abre la terminal (windows)/terminal (OS X/Linux). Para chequear que Python está instalado, ingrese el siguiente comando.</p>
+
+  <div class="note">
+  <p><strong>Nota</strong>: La v del ejemplo en mayuscula (V)</p>
+  </div>
+
+  <pre class="brush: bash">python -V</pre>
+ </li>
+ <li>
+  <p>Esto debe retornar un número de versión. Si esto esta bien, navega al directorio que contiene tu ejemplo, usando el comando <code>cd</code>.</p>
+
+  <pre class="brush: bash"># Incluye el nombre del directorio de entrar en él,
+por ejemplo cd Escritorio
+
+# Use dos puntos para regresar un nivel de directorio
+si es necesario,por ejemplo cd ../
+</pre>
+ </li>
+ <li>
+  <p>Ingresa el comando para iniciar el servidor en ese directorio:</p>
+
+  <pre class="brush: bash"># En Mac y Linux
+python -m SimpleHTTPServer
+#Windows
+python -m http.server</pre>
+ </li>
+ <li>
+  <p>Por defecto, se ejecutará el contenido del directorio en un servidor web local, en el puerto 8000. puedes ir a este servidor yendo a la URL <code>localhost:8000</code> en tu navegador web. Aquí verá el contenido del directorio listado - haga clic en el archivo HTML que desea ejecutar.</p>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: si ya tienes corriendo algo en el puerto 8000, puedes escoger otro puerto corriendo el siguiente comando de servidor por un número de puerto alternativo, por ejemplo <code>python -m SimpleHTTPServer 7800</code>. Puedes acceder a tu contenido en el<code>localhost:7800</code>.</p>
+</div>
+
+<h2 id="Ejecución_de_lenguajes_del_lado_del_servidor_localmente">Ejecución de lenguajes del lado del servidor localmente</h2>
+
+<p>El módulo <code>SimpleHTTPServer</code> de Python es útil, pero desconoce como ejecutar el código escrito en lenguajes como PHP o Python. Para resolver eso necesitarás algo más — lo que necesitarás exactamente depende del lenguaje del lado del servidor que estas intentando de ejecutar. Aquí están un par de ejemplos:</p>
+
+<ul>
+ <li>Para ejecutar el código del lado del servidor Python, necesitrá utilizar un framework web python. Puedes averiguar cómo usar el framework Django leyendog <a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a>. <a href="http://flask.pocoo.org/">Flask</a> también es buena alternativa a Django (ligeramente menos pesado). Para ejecutar esto necesitarás <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">instalar Python/PIP</a>, luego instala Flask usando <code>pip3 install flask</code>. En este punto, deberías ser capaz de ejecutar los ejemplos de Python Flask usando por ejemplo <code>python3 python-example.py</code>, luego navegar al <code>localhost:5000</code> en tu navegador.</li>
+ <li>Para ejecutar código Node.js (JavaScript) del lado del servidor, necesitarás usar el nodo raw o un framework construido encima de él. Express es una buena opción — mira <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a>.</li>
+ <li>Para ejecutar código PHP del lado del servidor, necesitarás una configuración de servidor que pueda interpretar PHP. Las buenas opciones para los testeos locales de PHP son <a class="external external-icon" href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac y Windows) t <a class="external external-icon" href="http://ampps.com/download">AMPPS</a> (Mac, Windows, Linux). Estos son paquetes completos que crean configuraciones locales que permiten ejecutar servidor Apache, PHP, y base de datos MySQL.</li>
+</ul>
diff --git a/files/es/learn/common_questions/thinking_before_coding/index.html b/files/es/learn/common_questions/thinking_before_coding/index.html
new file mode 100644
index 0000000000..f675eb8d80
--- /dev/null
+++ b/files/es/learn/common_questions/thinking_before_coding/index.html
@@ -0,0 +1,177 @@
+---
+title: ¿Cómo empiezo a diseñar mi sitio web?
+slug: Learn/Common_questions/Thinking_before_coding
+tags:
+  - Pensar
+  - Principiante
+  - antes de codificar
+  - ideación
+  - proyecto
+translation_of: Learn/Common_questions/Thinking_before_coding
+---
+<p class="summary">Este artículo cubre el primer paso importante de cada proyecto: definir lo que se desea lograr con él.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Ninguno</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectivo:</th>
+   <td>Aprender a definir metas para darle dirección a tu proyecto web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><span class="seoSummary">Al comenzar con un proyecto web, muchas personas se enfocan en el aspecto técnico. Por supuesto, debes estar más familiarizado con la técnica de su oficio, pero lo que realmente importa es lo que quieres lograr. Sí, parece obvio, pero demasiados proyectos fallan, no por falta de conocimiento técnico sino por falta de objetivos y visión.</span></p>
+
+<p>Entonces cuando tienes una idea y quieres convertirla en un sitio web, hay un par de cuestiones que debes responder antes que alguna otra cosa:</p>
+
+<ul>
+ <li>¿Qué es exactamente quiero lograr?</li>
+ <li>¿Cómo un sitio web me ayudará a alcanzar mis metas?</li>
+ <li>¿Qué es necesario hacer, y en qué orden, para alcanzar mis metas?</li>
+</ul>
+
+<p>Todo esto es llamado <em>idealización del proyecto</em> y es un primer paso necesario para alcanzar tus metas, si eres un desarrollador principiante o experimentado.</p>
+
+<h2 id="Aprendizaje_Activo">Aprendizaje Activo</h2>
+
+<p><em>No hay aprendizaje activo todavía. <a href="/es/docs/MDN/Comenzando">Por favor, considere la posibilidad de contribuir</a>.</em></p>
+
+<h2 id="Profundizando">Profundizando</h2>
+
+<p>Un proyecto nunca comienza por el lado técnico. Los músicos jamás compondrán ninguna música a menos que primero tengan la idea de lo quieren tocar, y eso también vale para los pintores, escritores y desarrolladores web. La técnica viene en segundo lugar.</p>
+
+<p>La técnica es crítica. Los músicos deben dominar su instrumento, pero los buenos músicos nunca producen buena música sin una idea. Por lo tanto, antes de saltar al lado técnico, por ejemplo código y herramientas, primero debes dar un paso atrás y decidir en detalle lo que deseas hacer.</p>
+
+<p>Una discusión de horas con los amigos es un buen comienzo, pero inapropiado. Debes sentarte y estructurar tus ideas, para tener una visión clara sobre el camino que debes tomar para materializar tus ideas. Para hacer esto, sólo necesitas lápiz y papel y un tiempo para resolver al menos las siguientes preguntas.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Hay innumerables maneras de llevar a cabo la ideación del proyecto. No podemos presentarlas a todas aquí (un libro entero no sería suficiente). Lo que presentamos aquí es un método sencillo para manejar lo que los profesionales llaman <a href="http://en.wikipedia.org/wiki/Ideation_(idea_generation)">Ideación de Proyectos</a>, <a href="https://es.wikipedia.org/wiki/Planeamiento_de_proyectos">Planificación de Proyectos</a> y <a href="https://es.wikipedia.org/wiki/Gesti%C3%B3n_de_proyectos">Gestión de Proyectos</a>.</p>
+</div>
+
+<h3 id="¿Qué_es_exactamente_lo_que_quiero_lograr">¿Qué es exactamente lo que quiero lograr?</h3>
+
+<p>Esta es la más importante pregunta a responder, ya que impulsa todo lo demás. Enumera todas la metas que deseas alcanzar. Puede ser cualquier cosa: vender bienes para ganar dinero, expresar opiniones políticas, conocer nuevos amigos, actuar con músicos, coleccionar imágenes de gatos o lo que quieras.</p>
+
+<p>Supongamos que eres músico. Y puedes desear que:</p>
+
+<ul>
+ <li>Permitir que las gente escuche tu música.</li>
+ <li>Venta de golosinas.</li>
+ <li>Conocer otros músicos.</li>
+ <li>Hablar acerca de tu música.</li>
+ <li>Enseñar música a través de vídeos.</li>
+ <li>Publicar fotos de tus gatos.</li>
+ <li>Encontrar un/a nuevo/a novio/a.</li>
+</ul>
+
+<p>Una vez que tengas la lista, necesitas priorizar. Ordena los objetivos desde los más importantes hacia los menos importantes.</p>
+
+<ol>
+ <li>Encontrar un/a nuevo/a novio/a.</li>
+ <li>Permitir que las gente escuche tu música.</li>
+ <li>Hablar acerca de tu música.</li>
+ <li>Conocer otros músicos.</li>
+ <li>Venta de golosinas.</li>
+ <li>Enseñar música a través de vídeos.</li>
+ <li>Publicar fotos de tus gatos.</li>
+</ol>
+
+<p>Haciendo este sencillo ejercicio, escribir metas y clasificarlas, te ayudará cuando tengas que tomar decisiones. (¿Debería implementar estas características, usar estos servicios, crear este diseño?)</p>
+
+<p>Entonces, ahora que tienes tu lista de objetivos priorizada, pasemos a la siguiente pregunta.</p>
+
+<h3 id="¿Cómo_podría_un_sitio_web_llevarme_a_mis_objetivos">¿Cómo podría un sitio web llevarme a mis objetivos?</h3>
+
+<p>Entonces, tienes tu lista de objetivos y sientes que necesitas un sitio web para alcanzarlos. ¿Estás seguro?</p>
+
+<p>Echemos un vistazo a nuestro ejemplo. Tenemos cinco metas relacionadas con la música, una relacionada a la vida personal (Encontrar pareja), y las fotos del gato completamente ajenas. ¿Es razonable construir un único sitio para cubrir todos esos objetivos? ¿Es necesario? Después de todo, una gran cantidad de servicios web existentes podría llevarte a tus objetivos sin necesidad de crear uno nuevo.</p>
+
+<p>Encontrar pareja es un caso prioritario en el que tiene más sentido utilizar los recursos existentes en lugar de construir todo un nuevo sitio. ¿Por qué? Porque invertiríamos más tiempo construyendo y manteniendo el sitio web en lugar de realmente buscar una pareja. Dado que nuestro objetivo es lo que más importa, debemos gastar nuestra energía en aprovechar las herramientas ya existentes en lugar de empezar desde cero. Una vez más, hay tantos servicios web ya disponibles para mostrar fotos que no vale la pena el esfuerzo para construir un nuevo sitio sólo para anunciar acerca de lo lindo que son nuestros gatos.</p>
+
+<p>Los otros cinco objetivos están todos conectados con la música. Hay, por supuesto, muchos servicios web que podrían manejar estas metas, pero tiene sentido, en este caso, construir un sitio web propio. Tal sitio web es la manera de agregar todo lo que queremos publicar en un solo lugar (bueno para las metas 3, 5 y 6). En resumen, ya que estos objetivos giran en torno al mismo tema, tener todo en un solo lugar nos ayudará a alcanzar nuestras metas y facilitará a nuestros seguidores el conectarse con nosotros.</p>
+
+<p>¿Cómo puede un sitio web ayudarme a alcanzar mis metas? Al responder a eso, encontrarás la mejor manera de alcanzar dichas metas y te ahorrarás desperdiciar esfuerzo.</p>
+
+<h3 id="¿Qué_hay_que_hacer_y_en_qué_orden_para_alcanzar_mis_metas">¿Qué hay que hacer, y en qué orden, para alcanzar mis metas?</h3>
+
+<p>Ahora que sabes qué es lo que quieres lograr, es momento de volver los objetivos en pasos prácticos. Como una nota lateral, tus metas no están necesariamente petrificadas, ellas evolucionan con el tiempo incluso en el transcurso del proyecto, si te encuentras con obstáculos inesperados o simplemente cambias de opinión.</p>
+
+<p>En lugar de una extensa explicación, volvamos a nuestro ejemplo con esta tabla.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Metas</th>
+   <th scope="col">Cosas por hacer</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">Permitir que las gente escuche tu música</td>
+   <td>
+    <ol>
+     <li>Grabar música</li>
+     <li>Prepara algunos archivos de audio utilizables online (¿Podrías hacer esto con servicios web existentes?)</li>
+     <li>Dale a las personas acceso a tu música en alguna parte de tu sitio web</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Hablar acerca de tu música</td>
+   <td>
+    <ol>
+     <li>Escribe algunos artículos para iniciar la discusión</li>
+     <li>Define cómo deben lucir los artículos</li>
+     <li>Publica los artículos en el sitio web (¿Cómo hacer esto?)</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Conocer otros músicos</td>
+   <td>
+    <ol>
+     <li>Provee modos para que las personas te contacten (¿Email? ¿Facebook? ¿Teléfono? ¿Correo?)</li>
+     <li>Define cómo las personas encontrarán esos canales de contacto desde tu sitio web</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Venta de golosinas</td>
+   <td>
+    <ol>
+     <li>Crea las golosinas</li>
+     <li>Almacena las golosinas</li>
+     <li>Encuentra un modo de manejar el envío</li>
+     <li>Encuentra una manera de manejar el pago</li>
+     <li>Hacer un mecanismo en tu sitio para que la gente haga pedidos</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Enseñar música mediante vídeos</td>
+   <td>
+    <ol>
+     <li>Grabar vídeos de lecciones</li>
+     <li>Preparara archivos de vídeos visibles online (Una vez más, ¿Podría hacer esto con los servicios de web ya existentes?)</li>
+     <li>Dar a la gente acceso a tus vídeos en alguna parte de tu sitio</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Dos cosas para resaltar. En primer lugar, algunos de estos items no están relacionados con la web (ej.: Grabar, escribir artículos). A menudo estas actividades fuera de línea importan incluso mucho más que el proyecto del sitio web. En ventas, por ejemplo, es mucho más importante y requiere mucho tiempo manejar la oferta, el pago y el envío que construir un sitio web donde las personas puedan realizar pedidos.</p>
+
+<p>En segundo lugar, establecer pasos procesables conduce a nuevas preguntas que necesitarás contestar. Por lo general, resultan ser más preguntas de lo que pensábamos al principio. (Ej. : ¿debo aprender a hacer todo yo mismo, pedirle a alguien que lo haga por mí, o utilizar servicios de terceros?).</p>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>Como puedes ver, la idea simple “Quiero hacer un sitio web” genera una larga lista de quehaceres, la cual sólo crece conforme piensas en ella. Pronto puede parecer abrumador, pero no entres en pánico. No es necesario responder todas las preguntas y no necesitas hacer todo lo de tu lista. Lo que importa es tener una visión de lo que deseas y cómo alcanzarlo. Una vez que tengas una visión clara, necesitarás decidir cómo y cuándo hacerlo. Divida grandes tareas en pequeños pasos procesables, y esos pequeños pasos sumarán a grandes logros.</p>
+
+<p> </p>
diff --git a/files/es/learn/common_questions/what_are_browser_developer_tools/index.html b/files/es/learn/common_questions/what_are_browser_developer_tools/index.html
new file mode 100644
index 0000000000..c08f596c74
--- /dev/null
+++ b/files/es/learn/common_questions/what_are_browser_developer_tools/index.html
@@ -0,0 +1,248 @@
+---
+title: ¿Cuáles son las herramientas de desarrollo del navegador?
+slug: Learn/Common_questions/What_are_browser_developer_tools
+tags:
+  - CSS
+  - CodingScripting
+  - HTML
+  - Herramientas para el desarrollador
+  - JavaScript
+  - Navegador
+  - Novato
+  - Principiante
+  - aprende
+translation_of: Learn/Common_questions/What_are_browser_developer_tools
+---
+<div>{{IncludeSubnav("/es/Learn")}}</div>
+
+<div class="summary">
+<p>Todos los navegadores web modernos incluyen un potente conjunto de herramientas para desarrolladores. Estas herramientas hacen una variedad de cosas, desde inspeccionar HTML, CSS y JavaScript actualmente cargados, hasta mostrar qué activos ha solicitado la página y cuánto tiempo tardaron en cargarse. Este artículo explica cómo utilizar las funciones básicas de las herramientas de desarrollo de tu navegador.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Antes de ejecutar los siguientes ejemplos, abre el <a href="http://mdn.github.io/beginner-html-site-scripted/">sitio de ejemplo para principiantes</a> que creamos durante la serie de artículos <a href="/es/Learn/Getting_started_with_the_web">Introducción a la Web</a>. Lo deberías tener abierto mientras sigues los pasos que explicamos a continuación.</p>
+</div>
+
+<h2 id="Cómo_abrir_devtools_en_tu_navegador">Cómo abrir devtools en tu navegador</h2>
+
+<p>Las herramientas para desarrolladores (<code>devtools</code>) viven dentro de tu navegador en una subventana que se ve más o menos así, dependiendo del navegador que estés utilizando:</p>
+
+<p><img alt="Devtools" src="https://mdn.mozillademos.org/files/16205/DevTools_63_inspector.png" style="border: 1px solid black; display: block; height: 1364px; margin: 0px auto; width: 672px;"></p>
+
+<p>¿Cómo la levantas? Existen tres distintas maneras:</p>
+
+<ul>
+ <li><em><strong>Teclado:</strong></em> <em><kbd>Ctrl</kbd>+<kbd>Mayús</kbd>+<kbd>I</kbd></em>, excepto en
+
+  <ul>
+   <li><strong>Internet Explorer y Edge: </strong><kbd>F12</kbd></li>
+   <li><strong>macOS: </strong><em><span class="Unicode"><kbd>⌘</kbd>+<kbd>⌥</kbd>+<kbd>I</kbd></span></em></li>
+  </ul>
+ </li>
+ <li><span class="Unicode"><em><strong>Barra de menú:</strong></em></span>
+  <ul>
+   <li><strong>Firefox</strong>: Menú <img alt="Devtools" src="https://mdn.mozillademos.org/files/9637/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"><span class="Unicode"><em><span class="Unicode">➤ Desarrollador web</span></em> <em><span class="Unicode">➤ Alternar herramientas,</span> </em><span class="Unicode"> o </span> <em>➤ Herramientas</em></span> <em>➤ Alternar herramientas del desarrollador web</em></li>
+   <li><strong>Chrome:</strong> <em><span class="Unicode">Más herramientas</span> ➤ Herramientas del desarrollador</em></li>
+   <li><strong>Safari:</strong> <em><span class="Unicode">Desarrollador ➤</span> Mostrar el inspector web.</em> Si no puedes ver el menú <em>Desarrollar</em>, ve a <em>Safari<span class="Unicode"> ➤</span> Preferencias ➤ Avanzado</em> y marca la casilla de verificación <em>Mostrar menú desarrollador en la barra de menú</em>.</li>
+   <li><strong>Opera</strong>: <em><span class="Unicode">Desarrollador ➤ </span> Herramientas para desarrolladores</em></li>
+  </ul>
+ </li>
+ <li><strong><em>Menú contextual:</em></strong> Presiona y mantén presionado / haz clic con el botón derecho en un elemento en una página web (Ctrl-clic en Mac) y elige <em>Inspeccionar elemento</em> en el menú contextual que aparece. (<em>Una ventaja adicional:</em> este método, inmediatamente resalta el código del elemento en el que hiciste clic con el botón derecho).</li>
+</ul>
+
+<p><img alt="Inspector" src="https://mdn.mozillademos.org/files/16206/inspector_context.png" style="display: block; height: 232px; margin: 0px auto; width: 350px;"></p>
+
+<h2 id="El_inspector_explorador_del_DOM_y_editor_CSS">El inspector: explorador del DOM y editor CSS</h2>
+
+<p>Las herramientas del desarrollador, generalmente se abren de forma predeterminada en el inspector, parecido a la siguiente captura de pantalla. Esta herramienta muestra cómo se ve el HTML en tu página en tiempo de ejecución, así como qué CSS se aplica a cada elemento de la página. También te permite modificar instantáneamente el HTML y CSS y ver los resultados de tus cambios reflejados en vivo en la ventana del navegador.</p>
+
+<p><img alt="Inspector resaltado" src="https://mdn.mozillademos.org/files/16208/inspector_highlighted.png" style="border-style: solid; border-width: 1px; display: block; height: 509px; margin: 0px auto; width: 672px;"></p>
+
+<p>Si <em>no</em> ves al inspector,</p>
+
+<ul>
+ <li>Toca o haz clic en la pestaña <em>Inspector</em>.</li>
+ <li>En Internet Explorer, toca/haz clic en <em>Explorador del DOM</em> o presiona <kbd>Ctrl</kbd>+<kbd>1</kbd>.</li>
+ <li>En Microsoft Edge u Opera, toca/haz clic en Elementos.</li>
+ <li>En Safari, los controles no se presentan con tanta claridad, pero deberías ver el HTML si no has seleccionado otra cosa para que aparezca en la ventana. Presiona el botón <em>Estilo</em> para ver el CSS.</li>
+</ul>
+
+<h3 id="Explorando_el_DOM_con_el_inspector">Explorando el DOM con el inspector</h3>
+
+<p>Para empezar, haz clic con el botón derecho (Ctrl+clic) en un elemento HTML en el inspector del DOM y observa el menú contextual. Las opciones disponibles en el menú varían según el navegador, pero en su mayoría, las más importantes son las mismas:</p>
+
+<p><img alt="Inspector del DOM" src="https://mdn.mozillademos.org/files/16209/dom_inspector.png" style="border: 1px solid black; display: block; height: 320px; margin: 0px auto; width: 350px;"></p>
+
+<ul>
+ <li><strong>Eliminar nodo</strong> (A veces <em>Eliminar elemento</em>). Elimina el elemento actual.</li>
+ <li><strong>Editar como HTML</strong> (A veces <em>Agregar atributo</em>/<em>Editar texto</em>). Te permite cambiar el HTML y ver los resultados en tiempo real. Muy útil para depurar y probar.</li>
+ <li><strong>:hover/:active/:focus</strong>. Obliga a que se activen los estados de los elementos, para que puedas ver cómo se vería su estilo.</li>
+ <li><strong>Copiar/Copiar como HTML</strong>. Copie el HTML seleccionado actualmente.</li>
+ <li>Algunos navegadores también disponen de <em>Copiar ruta CSS</em> y <em>Copiar XPath</em>, para permitirte copiar el selector CSS o la expresión XPath que seleccionaría el elemento HTML actual.</li>
+</ul>
+
+<p>Intenta editar algo de tu DOM ahora. Haz doble clic en un elemento o haz clic con el botón derecho del mouse y selecciona <em>Editar como HTML</em> en el menú contextual. Puedes realizar los cambios que desees, pero no los puedes guardar.</p>
+
+<h3 id="Explorar_el_editor_CSS">Explorar el editor CSS</h3>
+
+<p>De manera predeterminada, el editor CSS muestra las reglas CSS aplicadas al elemento seleccionado actualmente:</p>
+
+<p><img alt="Inspector CSS" src="https://mdn.mozillademos.org/files/16211/CSS_Inspector.png" style="display: block; height: 281px; margin: 0px auto; width: 500px;"></p>
+
+<p>Estas características son especialmente útiles:</p>
+
+<ul>
+ <li>Las reglas aplicadas al elemento actual se muestran en orden de mayor a menor especificidad.</li>
+ <li>Haz clic en las casillas de verificación junto a cada declaración para ver qué pasaría si eliminaras la declaración.</li>
+ <li>Haz clic en la pequeña flecha al lado de la abreviatura de cada propiedad para mostrar los nombres completos equivalentes de la propiedad.</li>
+ <li>Haz clic en el nombre o valor de una propiedad para que aparezca un cuadro de texto, donde puedes ingresar un nuevo valor para obtener una vista previa en vivo de un cambio de estilo.</li>
+ <li>Junto a cada regla está el nombre del archivo y el número de línea en el que se define la regla. Al hacer clic en esa regla, las herramientas de desarrollo saltan para mostrarlas en su propia vista, donde generalmente puedes editar y guardar.</li>
+ <li>También puedes hacer clic en la llave de cierre de cualquier regla para que aparezca un cuadro de texto en una nueva línea, donde puedes escribir una declaración completamente nueva para tu página.</li>
+</ul>
+
+<p>Notarás una serie de pestañas en las que se puede hacer clic en la parte superior del Visor CSS:</p>
+
+<ul>
+ <li><em>Calculado</em>: Muestra los estilos calculados para el elemento seleccionado actualmente (los valores finales normalizados que aplica el navegador).</li>
+ <li><em>Diseño</em>: En Firefox, esta área incluye dos secciones:
+  <ul>
+   <li><em>Modelo de caja</em>: representa visualmente el modelo de caja del elemento actual, por lo que de un vistazo puedes identificar qué relleno, borde y margen se le aplica, y qué tan grande es su contenido.</li>
+   <li><em>Cuadrícula</em>: Si la página que estás inspeccionando utiliza Grid CSS, esta sección te permite ver los detalles de la cuadrícula.</li>
+  </ul>
+ </li>
+ <li><em>Fuentes</em>: En Firefox, la pestaña <em>Fuentes</em> muestra los tipos de letra aplicados al elemento actual.</li>
+</ul>
+
+<h3 id="Conocer_más">Conocer más</h3>
+
+<p>Obtén más información sobre el Inspector en diferentes navegadores:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector">Inspector de páginas de Firefox.</a></li>
+ <li><a href="https://docs.microsoft.com/es-es/microsoft-edge/">Explorador del DOM de Edge.</a></li>
+ <li><a href="https://developers.google.com/web/tools/chrome-devtools/inspect-styles?utm_source=dcc&amp;utm_medium=redirect&amp;utm_campaign=2016q3">inspector del DOM de Chrome.</a> (el inspector de Opera funciona igual que este)</li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW1">Safari inspector y explorador de estilos.</a></li>
+</ul>
+
+<h2 id="El_depurador_de_JavaScript">El depurador de JavaScript</h2>
+
+<p>El depurador de JavaScript te permite observar el valor de las variables y establecer puntos de interrupción, lugares en tu código en los que deseas pausar la ejecución e identificar los problemas que impiden que tu código se ejecute correctamente.</p>
+
+<p><img alt="Depurador de Firefox" src="https://mdn.mozillademos.org/files/16239/firefox_debugger.png" style="border: 1px solid black; display: block; height: 556px; margin: 0 auto; width: 672px;"></p>
+
+<p>Para llegar al depurador:</p>
+
+<p><strong>Firefox</strong>: Selecciona <img alt="" src="https://mdn.mozillademos.org/files/9637/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> ➤ <em>Desarrollador Web</em> ➤ <em>Depurador</em> o presiona <kbd>Ctrl</kbd>+<kbd>Mayús</kbd>+<kbd>S</kbd> para abrir el depurador de JavaScript. Si ya estás viendo las herramientas, haz clic en la pestaña <strong>Depurador</strong>.</p>
+
+<p><strong>Chrome</strong>: Abre las herramientas para desarrolladores y luego selecciona la pestaña <strong>Fuentes</strong>. (Opera funciona de la misma manera).</p>
+
+<p><strong>Edge e Internet Explorer 11</strong>: presiona <kbd>F12</kbd> y luego <kbd>Ctrl</kbd>+<kbd>3</kbd>, o si ya estás viendo las herramientas, haz clic en la pestaña Depurador.</p>
+
+<p><strong>Safari</strong>: Abre las herramientas para desarrolladores y luego selecciona la pestaña Depurador.</p>
+
+<h3 id="Explorando_el_depurador">Explorando el depurador</h3>
+
+<p>En Firefox hay tres paneles en el depurador de JavaScript.</p>
+
+<h4 id="Lista_de_archivos">Lista de archivos</h4>
+
+<p>El primer panel de la izquierda contiene la lista de archivos asociados con la página que estás depurando. Selecciona el archivo con el que deseas trabajar de esta lista. Haz clic en un archivo para seleccionarlo y ver su contenido en el panel central del depurador.</p>
+
+<p><img alt="Lista de archivos" src="https://mdn.mozillademos.org/files/16240/File_List.png" style="border: 1px solid black; display: block; height: 326px; margin: 0 auto; width: 350px;"></p>
+
+<h4 id="Código_fuente">Código fuente</h4>
+
+<p>Establece puntos de interrupción donde desees pausar la ejecución. En la siguiente imagen, el resaltado del número 18 muestra que la línea tiene un punto de interrupción establecido.</p>
+
+<p><img alt="Código fuente" src="https://mdn.mozillademos.org/files/16241/Source_code.png" style="border: 1px solid black; display: block; height: 251px; margin: 0 auto; width: 400px;"></p>
+
+<h4 id="Ver_expresiones_y_puntos_de_interrupción">Ver expresiones y puntos de interrupción</h4>
+
+<p>El panel de la derecha muestra una lista de las expresiones en observación que has agregado y los puntos de interrupción que has establecido.</p>
+
+<p>En la imagen, la primera sección, <strong>Ver expresiones</strong>, muestra que se ha agregado la variable <code>listItems</code>. Puedes expandir la lista para ver los valores del arreglo.</p>
+
+<p>La siguiente sección, <strong>Puntos de interrupción</strong>, enumera los puntos de interrupción establecidos en la página. En <code>example.js</code>, se ha establecido un punto de interrupción en la instrucción <code>listItems.push(inputNewItem.value);</code></p>
+
+<p>Las dos últimas secciones solo aparecen cuando el código se está ejecutando.</p>
+
+<p>La sección <strong>Pila de llamadas</strong> muestra qué código se ejecutó para llegar a la línea actual. Puedes ver que el código está en la función que maneja un clic del mouse y que el código está actualmente en pausa en el punto de interrupción.</p>
+
+<p>La sección final, <strong>Alcances</strong>, muestra qué valores son visibles desde varios puntos dentro de tu código. Por ejemplo, en la siguiente imagen, puedes ver los objetos disponibles para el código en la función <code>addItemClick</code>.</p>
+
+<p><img alt="ver elementos" src="https://mdn.mozillademos.org/files/16242/watch_items.png" style="border: 1px solid black; display: block; height: 743px; width: 350px;"></p>
+
+<h3 id="Conocer_más_2">Conocer más</h3>
+
+<p>Obtén más información sobre el depurador de JavaScript en diferentes navegadores:</p>
+
+<ul>
+ <li><a href="/es/docs/Tools/Debugger">Depurador de JavaScript en Firefox.</a></li>
+ <li><a href="https://docs.microsoft.com/es-es/microsoft-edge/devtools-guide/debugger">Depurador de Microsoft Edge.</a></li>
+ <li><a href="https://developers.google.com/web/tools/chrome-devtools/javascript/">Depurador de Chrome.</a></li>
+ <li><a href="https://developer.apple.com/safari/tools/">Depurador de Safari.</a></li>
+</ul>
+
+<h2 id="La_consola_de_JavaScript">La consola de JavaScript</h2>
+
+<p>La consola de JavaScript es una herramienta increíblemente útil para depurar JavaScript que no funciona como se esperaba. Te permite ejecutar líneas de JavaScript en la página actualmente cargada en el navegador e informa los errores encontrados cuando el navegador intenta ejecutar tu código. Para acceder a la consola en cualquier navegador:</p>
+
+<p>Si las herramientas para desarrolladores ya están abiertas, haz clic o presiona la pestaña Consola.</p>
+
+<p>De lo contrario, Firefox te permite abrir la consola directamente usando <kbd>Ctrl</kbd>+<kbd>Mayús</kbd>+<kbd>K</kbd> o usando el comando del menú: Menú <img alt="" src="https://mdn.mozillademos.org/files/9637/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> <span class="Unicode"> <em><span class="Unicode"> ➤ Desarrollador web</span></em> <em><span class="Unicode"> ➤ Consola web,</span></em> <span class="Unicode"> o</span> <em>Herramientas ➤</em></span> <em>Desarrollador web ➤ Consola web. </em>En otro navegador, abre las herramientas para desarrolladores y luego haz clic en la pestaña Consola.</p>
+
+<p>Esto te dará una ventana como la siguiente:</p>
+
+<p><img alt="Sólo consola" src="https://mdn.mozillademos.org/files/16212/console_only.png" style="border: 1px solid black; display: block; height: 187px; margin: 0px auto; width: 672px;"></p>
+
+<p>Para ver qué sucede, intenta ingresar los siguientes fragmentos de código en la consola uno por uno (y luego presiona Intro):</p>
+
+<ol>
+ <li>
+  <pre class="brush: js notranslate">alert('hello!');</pre>
+ </li>
+ <li>
+  <pre class="brush: js notranslate">document.querySelector('html').style.backgroundColor = 'purple';</pre>
+ </li>
+ <li>
+  <pre class="brush: js notranslate">const myWordmark = document.createElement('img');
+myWordmark.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
+document.querySelector('h1').appendChild(myWordmark);</pre>
+ </li>
+</ol>
+
+<p>Ahora intenta ingresar las siguientes versiones incorrectas del código y ve lo que obtienes.</p>
+
+<ol>
+ <li>
+  <pre class="brush: js notranslate">alert('hello!);</pre>
+ </li>
+ <li>
+  <pre class="brush: js notranslate">document.cheeseSelector('html').style.backgroundColor = 'purple';</pre>
+ </li>
+ <li>
+  <pre class="brush: js notranslate">const myWordmark = document.createElement('img');
+myBanana.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
+document.querySelector('h1').appendChild(myWordmark);</pre>
+ </li>
+</ol>
+
+<p>Comenzarás a ver el tipo de errores que devuelve el navegador. A menudo, estos errores son bastante crípticos, ¡pero debería ser bastante sencillo resolver estos problemas!</p>
+
+<h3 id="Conocer_más_3">Conocer más</h3>
+
+<p>Obtén más información sobre la consola de JavaScript en diferentes navegadores:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Consola Web de Firefox.</a></li>
+ <li><a href="https://docs.microsoft.com/es-es/microsoft-edge/devtools-guide-chromium">Consola de JavaScript Edge.</a></li>
+ <li><a href="https://developer.chrome.com/devtools/docs/console">Consola JavaScript de Chrome.</a> (el inspector de Opera funciona de la misma manera)</li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1">Consola en Safari.</a></li>
+</ul>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Depurar HTML.</a></li>
+ <li><a href="/es/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Depurar CSS.</a></li>
+</ul>
diff --git a/files/es/learn/common_questions/what_are_hyperlinks/index.html b/files/es/learn/common_questions/what_are_hyperlinks/index.html
new file mode 100644
index 0000000000..dd1d28573d
--- /dev/null
+++ b/files/es/learn/common_questions/what_are_hyperlinks/index.html
@@ -0,0 +1,91 @@
+---
+title: Qué son los hipervínculos?
+slug: Learn/Common_questions/What_are_hyperlinks
+translation_of: Learn/Common_questions/What_are_hyperlinks
+---
+<div class="summary">
+<p>En este artículo, repasaremos qué son los hipervínculos y por qué son importantes.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Debes saber <a href="/en-US/Learn/How_the_Internet_works">how the Internet works</a> Y estar familiarizado con<a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine"> the difference between a webpage, a website, a web server, and a search engine</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Conozca los enlaces en la web y por qué son importantes.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Los hipervínculos, generalmente llamados enlaces, son un concepto fundamental detrás de la Web. Para explicar qué son los enlaces, debemos retroceder a los conceptos básicos de la arquitectura web.</p>
+
+<p>En 1989, Tim Berners-Lee, el inventor de la Web, habló de los tres pilares en los que se basa la Web:</p>
+
+<ol>
+ <li>{{Glossary("URL")}}, un sistema de direcciones que realiza un seguimiento de los documentos web</li>
+ <li>{{Glossary("HTTP")}}, un protocolo de transferencia para encontrar documentos cuando se les da su URL</li>
+ <li>{{Glossary("HTML")}}, un formato de documento que permite hipervínculos incrustados</li>
+</ol>
+
+<p>Como puede ver en los tres pilares, todo en la Web gira en torno a los documentos y cómo acceder a ellos. El propósito original de la Web era proporcionar una manera fácil de alcanzar, leer y navegar a través de documentos de texto. Desde entonces, la Web ha evolucionado para proporcionar acceso a imágenes, videos y datos binarios, pero estas mejoras apenas han cambiado los tres pilares.</p>
+
+<p>Antes de la Web, era bastante difícil acceder a los documentos y pasar de uno a otro. Al ser legibles por humanos, las URL ya facilitaron las cosas, pero es difícil escribir una URL larga cada vez que desee acceder a un documento. Aquí es donde los hipervínculos revolucionaron todo. Los enlaces pueden correlacionar cualquier cadena de texto con una URL, de modo que el usuario pueda alcanzar instantáneamente el documento de destino activando el enlace.</p>
+
+<p>Los enlaces se destacan del texto circundante al estar subrayados y en texto azul. Toque o haga clic en un enlace para activarlo, o si usa un teclado, presione Tab hasta que el enlace esté enfocado y presione Entrar o la barra espaciadora.</p>
+
+<p><img alt="Example of a basic display and effect of a link in a web page" src="https://mdn.mozillademos.org/files/8625/link-1.png" style="height: 492px; width: 477px;"></p>
+
+<p>Los enlaces son el avance que hizo que la Web fuera tan útil y exitosa. En el resto de este artículo, discutimos los diversos tipos de enlaces y su importancia para el diseño web moderno.</p>
+
+<h2 id="Profundizando">Profundizando</h2>
+
+<p>Como dijimos, un enlace es una cadena de texto vinculada a una URL, y usamos enlaces para permitir saltar fácilmente de un documento a otro. Dicho esto, hay algunos matices que vale la pena considerar:</p>
+
+<h3 id="Tipos_de_enlaces">Tipos de enlaces</h3>
+
+<dl>
+ <dt>Enlace interno</dt>
+ <dd>Un enlace entre dos páginas web, donde ambas páginas pertenecen al mismo sitio web, se denomina enlace interno. Sin enlaces internos, no existe un sitio web (a menos, por supuesto, que sea un sitio web de una página).</dd>
+ <dt>Enlace externo</dt>
+ <dd>Un enlace desde su página web a la página web de otra persona. Sin enlaces externos, no hay Web, ya que la Web es una red de páginas web. Utilice enlaces externos para proporcionar información además del contenido disponible a través de su página web.</dd>
+ <dt>Enlaces entrantes</dt>
+ <dd>Un enlace desde la página web de otra persona a su sitio. Es lo contrario de un enlace externo. Tenga en cuenta que no tiene que volver a vincular cuando alguien vincula a su sitio.</dd>
+</dl>
+
+<p>Cuando esté creando un sitio web, concéntrese en los enlaces internos, ya que estos hacen que su sitio sea utilizable. Encuentre un buen equilibrio entre tener demasiados enlaces y muy pocos. Hablaremos sobre el diseño de la navegación del sitio web en otro artículo, pero como regla general, cada vez que agregue una nueva página web, asegúrese de que al menos una de sus otras páginas enlaza con esa nueva página. Por otro lado, si su sitio tiene más de aproximadamente diez páginas, es contraproducente vincular a cada página desde cualquier otra página.</p>
+
+<p>Cuando comienzas, no tienes que preocuparte tanto por los enlaces externos y entrantes, pero son muy importantes si quieres que los motores de búsqueda encuentren tu sitio (ver más abajo para más detalles).</p>
+
+<h3 id="Anclas">Anclas</h3>
+
+<p>La mayoría de los enlaces vinculan dos páginas web. Las anclas unen dos secciones de un documento. Cuando sigue un enlace que apunta a un ancla, su navegador salta a otra parte del documento actual en lugar de cargar un nuevo documento. Sin embargo, crea y utiliza anclajes de la misma manera que otros enlaces.</p>
+
+<p><img alt="Example of a basic display and effect of an anchor in a web page" src="https://mdn.mozillademos.org/files/8627/link-2.png" style="height: 492px; width: 477px;"></p>
+
+<h3 id="Enlaces_y_motores_de_búsqueda">Enlaces y motores de búsqueda</h3>
+
+<p>Los enlaces son importantes tanto para los usuarios como para los motores de búsqueda. Cada vez que los motores de búsqueda rastrean una página web, indexan el sitio web siguiendo los enlaces disponibles en la página web. Los motores de búsqueda no solo siguen enlaces para descubrir las distintas páginas del sitio web, sino que también usan el texto visible del enlace para determinar qué consultas de búsqueda son apropiadas para llegar a la página web de destino.</p>
+
+<p>Los enlaces influyen en la facilidad con que un motor de búsqueda se vinculará a su sitio. El problema es que es difícil medir las actividades de los motores de búsqueda. Las empresas, naturalmente, quieren que sus sitios tengan un alto ranking en los resultados de búsqueda. Sabemos lo siguiente acerca de cómo los motores de búsqueda determinan el rango de un sitio:</p>
+
+<ul>
+ <li>El texto visible de un enlace influye en qué consultas de búsqueda encontrarán una URL determinada.</li>
+ <li>Cuantos más enlaces entrantes pueda presumir una página web, más alto se ubica en los resultados de búsqueda.</li>
+ <li><em>Los enlaces externos influyen en el ranking de búsqueda de las páginas web de origen y destino, pero no está claro cuánto.</em></li>
+</ul>
+
+<p><a href="http://en.wikipedia.org/wiki/Search_engine_optimization">SEO</a> (optimización de motores de búsqueda) es el estudio de cómo hacer que los sitios web tengan un alto ranking en los resultados de búsqueda. Mejorar el uso de enlaces de un sitio web es una técnica útil de SEO.</p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<p>Ahora querrás configurar algunas páginas web con enlaces.</p>
+
+<ul>
+ <li>Para obtener más antecedentes teóricos, aprenda sobre <a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">URLs y su estructura</a>, dado que todo enlace apunta a una URL.</li>
+ <li>¿Quieres algo un poco más práctico? El artículo <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a> de nuestro módulo <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducción a HTML</a> explica cómo implementar enlaces en detalle.</li>
+</ul>
diff --git a/files/es/learn/common_questions/what_is_a_domain_name/index.html b/files/es/learn/common_questions/what_is_a_domain_name/index.html
new file mode 100644
index 0000000000..bc38251b25
--- /dev/null
+++ b/files/es/learn/common_questions/what_is_a_domain_name/index.html
@@ -0,0 +1,157 @@
+---
+title: ¿Qué es un nombre de dominio?
+slug: Learn/Common_questions/What_is_a_domain_name
+tags:
+  - Infraestructura
+  - Nombres de dominio
+  - Principiante
+  - Web
+translation_of: Learn/Common_questions/What_is_a_domain_name
+---
+<div class="summary">
+<p>En este artículo discutiremos acerca de los nombres de los dominios: qué son, cómo se estructuran y cómo conseguir uno.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Primero necesitas saber <a href="/en-US/docs/Learn/How_the_Internet_works">cómo funciona Internet</a> y entender <a href="/en-US/Learn/Understanding_URLs">qué son las URLs</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprende qué son los nombres de dominio, cómo funcionan, y por qué son importantes.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><span class="seoSummary">Los nombres de dominio son una parte clave de la infraestructura de internet.  Proporcionan una dirección legible para cualquier servidor web disponible en Internet.</span></p>
+
+<p><span class="seoSummary">Cualquier computadora conectada a Internet puede ser alcanzada a partir de una dirección {{Glossary("IP")}} pública, la cual puede estar formada por 32 bits para el protocolo IPv4 (por lo general se escribe con 4 números separados por puntos entre el 0 y 255, por ejemplo, <code>173.194.121.32</code>) o por 128 bits para la versión IPv6 (formada por 8 grupos de 4 números hexadecimales separados por dos puntos, ejemplo <code>2027:0da8:8b73:0000:0000:8a2e:0370:1337</code>). Las computadoras pueden manejar estas direcciones fácilmente, pero las personas pasan trabajo para saber de quien es el servidor o que servicio ofrece, ya que un número por sí solo no dice mucho. Además las direcciones IP son difíciles de recordar y pueden cambiarse en cualquier momento. Para resolver estos problemas se usan direcciones que las personas pueden leer, que son intuitivas, fáciles de recordar y dicen mucho sobre el servicio web que ofrecen, se denominan nombres de dominio. </span></p>
+
+<h2 id="Ánalisis_del_tema">Ánalisis del tema</h2>
+
+<h3 id="Estructura_de_los_nombres_de_dominio">Estructura de los nombres de dominio</h3>
+
+<p>Un nombre de dominio tiene una estructura simple formada por varias partes (puede tener solamente una parte, dos, tres,...), separadas por puntos y <strong>se leen de derecha a izquierda</strong>:</p>
+
+<p><img alt="Anatomy of the MDN domain name" src="https://mdn.mozillademos.org/files/11229/structure.png" style="height: 76px; width: 252px;"></p>
+
+<p>Cada una de estas partes provee información específica sobre el nombre de dominio completo.</p>
+
+<ul>
+ <li>TLDs l<span style="display: none;"> </span>ocales como <code>.us</code>, <code>.fr</code>, o <code>.se</code> pueden requerir el servicio en un determinado idioma o  que esté alojado en un país específico - estan hecho para indicar que un recurso está en un idioma o país en particular.</li>
+ <li>Los TLDs que contienen <code>.gov</code> son solamente permitidos para ser usados por los departamentos de gobierno.</li>
+ <li>Los TLDs como <code>.edu</code> y <code>.ac</code> <code>.uk</code> se supone que se usen solamente en instituciones educacionales o académicas.</li>
+</ul>
+
+<dl>
+ <dt>{{Glossary("TLD")}} (Top-Level Domain) Dominio de primer nivel.</dt>
+ <dd>El TLD proporciona la información más genérica. Los TLDs les dicen a usuarios el propósito general del servicio que se esconde tras el nombre de dominio. Los TLDs más genéricos (.com, .org, .net) no requieren que los servicios web cumplan ningún criterio particular, pero algunos TLDs hacen cumplir políticas más estrictas por lo que es más claro su propósito. Por ejemplo:</dd>
+ <dd><strong style="font-size: 1rem; font-weight: 700; letter-spacing: -0.00278rem;">Etiqueta (o componente)</strong></dd>
+ <dd>Las etiquetas son lo que siguen al TLD. Una etiqueta puede se cualquier cosa desde una letra hasta una oración completa. La etiqueta localizada a la derecha antes del TLD puede ser llamada también Dominio de Nivel Secundario, en inglés <em>Secondary Level Domain</em> (SLD). Un nombre de dominio puede tener muchas etiquetas (o componentes), no es obligatorio ni necesario tener tres etiquetas para formar un nombre de dominio. Por ejemplo,    www.inf.ed.ac.uk es un nombre de dominio correcto. Para cualquier dominio sobre el que se tenga control (por ejemplo <a href="https://mozilla.org">mozilla.org</a>), uno puede crear otros nombres de dominio (a veces llamados "subdominios", por ejemplo <a href="https://developer.mozilla.org">developer.mozilla.org</a> o <a href="https://iot.mozilla.org/">iot.mozilla.org</a>).</dd>
+</dl>
+
+<h3 id="Comprar_un_nombre_de_dominio">Comprar un nombre de dominio</h3>
+
+<h4 id="¿Quién_es_propietario_de_un_nombre_de_dominio">¿Quién es propietario de un nombre de dominio?</h4>
+
+<p>No se puede “comprar un nombre de dominio”.  Se paga por el derecho de usar un nombre de dominio por uno o más años. Se pueden renovar los derechos  y la renovación tiene prioridad sobre las aplicaciones de otras personas. Pero nuncá se podrá apropiar se un nombre de dominio. Una vez que deja de pagarlo queda libre para que otras personas puedan utilizarlo.</p>
+
+<p>Las compañías llamadas registradores utilizan los registros de nombres de dominio para realizar un seguimiento de la información técnica y administrativa que lo conecta con su nombre de dominio.</p>
+
+<div class="note">
+<p><strong>Nota :  </strong>Para algunos nombres de dominio pudiera no ser un registrador quien esté a cargo de mantener el seguimiento. Por ejemplo, cada nombre de dominio bajo <code>.fire</code> es manejado por Amazon.</p>
+</div>
+
+<h4 id="Encontrar_un_nombre_de_dominio_disponible">Encontrar un nombre de dominio disponible</h4>
+
+<p>Para encontrar si un nombre de dominio dado está disponible,</p>
+
+<ul>
+ <li>Ir a un sitio web de registro de nombres de dominio. La mayoría de ellos, tienen un servicio "whois" que te dice si un nombre de dominio está disponible.</li>
+ <li>Alternativamente, si usted usa un sistema con un shell incorporado, escriba el comando <code>whois</code>, como se muestra aquí para <code>mozilla.org</code>:</li>
+</ul>
+
+<pre>$ whois mozilla.org
+Domain Name:MOZILLA.ORG
+Domain ID: D1409563-LROR
+Creation Date: 1998-01-24T05:00:00Z
+Updated Date: 2013-12-08T01:16:57Z
+Registry Expiry Date: 2015-01-23T05:00:00Z
+Sponsoring Registrar:MarkMonitor Inc. (R37-LROR)
+Sponsoring Registrar IANA ID: 292
+WHOIS Server:
+Referral URL:
+Domain Status: clientDeleteProhibited
+Domain Status: clientTransferProhibited
+Domain Status: clientUpdateProhibited
+Registrant ID:mmr-33684
+Registrant Name:DNS Admin
+Registrant Organization:Mozilla Foundation
+Registrant Street: 650 Castro St Ste 300
+Registrant City:Mountain View
+Registrant State/Province:CA
+Registrant Postal Code:94041
+Registrant Country:US
+Registrant Phone:+1.6509030800
+</pre>
+
+<p>Como se observa, no se puede registrar <code>mozilla.org</code> porque la fundación de Mozilla ya ha sido registrada.</p>
+
+<p>Por otra parte, veamos si se puede registrar <code>afunkydomainname.org</code>:</p>
+
+<pre>$ whois afunkydomainname.org
+NOT FOUND
+</pre>
+
+<p>Como se observa, el dominio no existe en la base de datos de <code>whois</code> (en el momento que se escribió), por lo que pudiéramos pedir registrarlo. ¡Bueno para saber!</p>
+
+<h4 id="Obtener_un_nombre_de_dominio">Obtener un nombre de dominio</h4>
+
+<p>El proceso es bastante sencillo:</p>
+
+<ol>
+ <li>Ir a un sitio de registro.</li>
+ <li>Generalmente hay un letrero que llama la atención que dice “Get a domain name”. Hacer click en él.</li>
+ <li>Rellenar el formulario con todos los detalles requeridos. Asegúrese de no haber escrito incorrectamente el nombre de dominio deseado. ¡Una vez que esté pagado, es muy tarde!.</li>
+ <li>El registrador te permitirá conocer cuando un nombre de dominio esté correctamente registrado. Dentro de unas pocas horas, todos los servidores DNS habrán recibido su información de DNS.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota:</strong> En este proceso se le pide su dirección real. Asegúrese de escribirla correctamente, ya que en algunos países los registradores pueden verse obligados a cerrar el dominio si no pueden proporcionar una dirección válida. </p>
+</div>
+
+<h4 id="Actualización_de_DNS">Actualización de DNS </h4>
+
+<p>Las bases de datos DNS son almacenadas en cada servidor DNS del mundo, y todos ellos hacen referencia a unos pocos denominados "servidores de nombre autoritario" o "servidores DNS de primer nivel". Cuando su registrador crea o actualiza alguna información para un dominio dado, la información tiene que ser actualizada en cada base de datos DNS. Cada servidor DNS que conoce sobre un dominio dado almacena la información por algún tiempo antes de que sea automáticamente invalidada y luego actualizada ( el servidor DNS consulta un servidor autoritario nuevamente). De esta manera, a los servidores DNS que conocen este nombre de dominio les toma algún tiempo poner la información al día.</p>
+
+<div class="note">
+<p><strong>Nota :</strong> Este tiempo es amenudo llamado <strong>tiempo de propagación</strong> . Sin embargo, este término no es preciso puesto que la actualizaciónn no se está propagando en sí (primer nivel → nivel inferior). Los servidores DNS consultados por su computadora (nivel inferior) son los que obtienen la información del servidor autoritario(primer nivel) cuando lo necesitan. </p>
+</div>
+
+<h3 id="¿Cómo_funciona_una_petición_DNS">¿Cómo funciona una petición DNS?</h3>
+
+<p>Como ya hemos visto, cuando usted quiere visualizar una página web en su navegador es más simple escribir un nombre de dominio que una dirección IP.  Echemos un vistazo al proceso: </p>
+
+<ol>
+ <li>Escriba <code>mozilla.org</code> en la barra de direcciones de su navegador.</li>
+ <li>Su navegador le pregunta a su computadora si reconoce la dirección IP identificada por este nombre de dominio (usando una caché DNS local) Si lo hace, el nombre es traducido a la IP y el navegador gestiona el contenido con el servidor web. Fin de la historia.</li>
+ <li>Si la computadora no sabe qué IP está detrás del nombre <code>mozilla.org</code>, hay que pedírselo a un servidor DNS, cuyo trabajo es precisamente decirle a la computadora cuál es la dirección IP de cada nombre de dominio registrado.</li>
+ <li>Ahora que la computadora conoce la dirección IP requerida, su navegador puede gestionar contenidos con el servidor web.</li>
+</ol>
+
+<p><img alt="Explanation of the steps needed to obtain the result to a DNS request" src="https://mdn.mozillademos.org/files/8961/2014-10-dns-request2.png" style="height: 702px; width: 544px;"></p>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<p>Bien, hemos hablado mucho sobre procesos y arquitectura. Es hora de seguir adelante.</p>
+
+<ul>
+ <li>Si quieres ponerte manos a la obra, es buen momento para comenzar a profundizar en el diseño y explorar <a href="/es/docs/Learn/Common_questions/dise%C3%B1os_web_comunes">la estructura de una página web</a>.</li>
+ <li>Vale la pena señalar que algunos aspectos de construcción de un sitio web cuestan dinero. Por favor, remítase a <a href="/en-US/docs/Learn/How_much_does_it_cost">cuánto cuesta construir un sitio web</a>.</li>
+ <li>O lea más sobre <a href="https://es.wikipedia.org/wiki/Dominio">Nombre de Dominio</a> en la Wikipedia.</li>
+ <li>Puede encontrar además <a href="https://howdns.works/">aquí</a> una explicación colorida y divertida de cómo los DNS trabajan.</li>
+</ul>