From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- .../css_basics/index.html | 283 +++++++++++++ .../c\303\263mo_funciona_la_web/index.html" | 100 +++++ .../html_basics/index.html | 224 ++++++++++ .../learn/getting_started_with_the_web/index.html | 68 +++ .../instalacion_de_software_basico/index.html | 83 ++++ .../javascript_basics/index.html | 456 +++++++++++++++++++++ .../la_web_y_los_estandares_web/index.html | 172 ++++++++ .../manejando_los_archivos/index.html | 120 ++++++ .../publishing_your_website/index.html | 195 +++++++++ .../what_will_your_website_look_like/index.html | 113 +++++ 10 files changed, 1814 insertions(+) create mode 100644 files/es/learn/getting_started_with_the_web/css_basics/index.html create mode 100644 "files/es/learn/getting_started_with_the_web/c\303\263mo_funciona_la_web/index.html" create mode 100644 files/es/learn/getting_started_with_the_web/html_basics/index.html create mode 100644 files/es/learn/getting_started_with_the_web/index.html create mode 100644 files/es/learn/getting_started_with_the_web/instalacion_de_software_basico/index.html create mode 100644 files/es/learn/getting_started_with_the_web/javascript_basics/index.html create mode 100644 files/es/learn/getting_started_with_the_web/la_web_y_los_estandares_web/index.html create mode 100644 files/es/learn/getting_started_with_the_web/manejando_los_archivos/index.html create mode 100644 files/es/learn/getting_started_with_the_web/publishing_your_website/index.html create mode 100644 files/es/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html (limited to 'files/es/learn/getting_started_with_the_web') diff --git a/files/es/learn/getting_started_with_the_web/css_basics/index.html b/files/es/learn/getting_started_with_the_web/css_basics/index.html new file mode 100644 index 0000000000..af79920af3 --- /dev/null +++ b/files/es/learn/getting_started_with_the_web/css_basics/index.html @@ -0,0 +1,283 @@ +--- +title: CSS básico +slug: Learn/Getting_started_with_the_web/CSS_basics +tags: + - CSS + - Codificacion/Scripting + - Estilos/Styling + - Principiante + - Web + - aprende +translation_of: Learn/Getting_started_with_the_web/CSS_basics +--- +
{{LearnSideBar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics","Learn/Getting_started_with_the_web")}}
+ +
+

CSS (Hojas de Estilo en Cascada) es el código que usas para dar estilo a tu página web. CSS Básico te lleva a través de lo que tú necesitas para empezar. Contestará a preguntas del tipo: ¿Cómo hago mi texto rojo o negro? ¿Cómo hago que mi contenido se muestre en tal y tal lugar de la pantalla? ¿Cómo decoro mi página web con imágenes de fondo y colores?

+
+ +

Entonces ¿qué es CSS, realmente?

+ +

Como HTML, CSS (Cascading Style Sheets) u Hojas de estilo en cascada en español, no es realmente un lenguaje de programación, tampoco es un lenguaje de marcado. Es un lenguaje de hojas de estilo, es decir, te permite aplicar estilos de manera selectiva a elementos en documentos HTML. Por ejemplo, para seleccionar todos los elementos de párrafo en una página HTML y volver el texto dentro de ellos de color rojo, has de escribir este CSS:

+ +
p {
+  color: red;
+}
+ +

Vas a probarlo: pega estas tres líneas de CSS en un nuevo archivo en tu editor de texto y guarda este archivo como style.css en tu directorio styles (estilos).

+ +

Pero aún debes aplicar el CSS a tu documento HTML, de otra manera el estilo CSS no cambiará cómo tu navegador muestra el documento HTML. (Si no has seguido nuestro proyecto, lee Manejo de archivos y HTML básico para averiguar qué necesitas hacer primero.)

+ +
    +
  1. Abre tu archivo index.html y pega la siguiente línea en algún lugar dentro del {{htmlelement("head")}}, es decir, entre las etiquetas <head> y </head>: + +
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    +
  2. +
  3. Guarda el archivo index.html y cárgalo en tu navegador. Debes ver algo como esto:
  4. +
+ +

Un logo de Mozilla y algunos párrafos. El texto del párrafo ha sido estilizado en rojo por nuestro css.Si tu texto del párrafo ahora es rojo, ¡felicitaciones, ya has escrito tu primer CSS de forma exitosa!

+ +

Anatomía de una regla CSS

+ +

Observa el código CSS de arriba, un poco más a detalle:

+ +

Partes de una declaracion de css

+ +

La estructura completa es llamada regla predeterminada (pero a menudo «regla» para abreviar). Nota también los nombres de las partes individuales:

+ +
+
Selector
+
El elemento HTML en el que comienza la regla. Esta selecciona el(los) elemento(s) a dar estilo (en este caso, los elementos {{htmlelement("p")}} ). Para dar estilo a un elemento diferente, solo cambia el selector.
+
Declaración
+
Una sola regla como color: red; especifica a cuál de las propiedades del elemento quieres dar estilo.
+
Propiedades
+
Maneras en las cuales puedes dar estilo a un elemento HTML. (En este caso, color es una propiedad del elemento {{htmlelement("p")}} ). En CSS, seleccionas qué propiedad quieres afectar en tu regla.
+
Valor de la propiedad
+
A la derecha de la propiedad, después de los dos puntos (:), tienes el valor de la propiedad, para elegir una de las muchas posibles apariencias para una propiedad determinada (hay muchos valores para color además de red).
+
+ +

Nota las otras partes importantes de la sintaxis:

+ + + +

De este modo para modificar varios valores de propiedad a la vez, solo necesitas escribirlos separados por punto y coma (;), así:

+ +
p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}
+ +

Seleccionar varios elementos

+ +

También puedes seleccionar varios elementos y aplicar una sola regla a todos ellos. Incluye varios selectores separados por comas (,). Por ejemplo:

+ +
p,li,h1 {
+  color: red;
+}
+ +

Diferentes tipos de selectores

+ +

Existen muchos tipos diferentes de selectores. Antes, solo viste los selectores de elementos, los cuales seleccionan todos los elementos de un tipo dado en los documentos HTML. Sin embargo puedes hacer selecciones más específicas que esas. En seguida están algunos de los tipos de selectores más comunes:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nombre del selectorQué seleccionaEjemplo
Selector de elemento (llamado algunas veces selector de etiqueta o tipo)Todos los elementos HTML del tipo especificado.p
+ Selecciona <p>
Selector de identificación (ID)El elemento en la página con el ID especificado (en una página HTML dada, solo se permite un único elemento por ID).#mi-id
+ Selecciona <p id="mi-id"> y <a id="mi-id">
Selector de claseLos elementos en la página con la clase especificada (una clase puede aparecer varias veces en una página)..mi-clase
+ Selecciona <p class="mi-clase"> y <a class="mi-clase">
Selector de atributoLos elementos en una página con el atributo especificado.img[src]
+ Selecciona <img src="mimagen.png"> pero no <img>
Selector de pseudoclaseLos elementos especificados, pero solo cuando esté en el estado especificado, por ejemplo cuando el puntero esté sobre él.a:hover
+ Selecciona <a>, pero solo cuando el puntero esté sobre el enlace.
+ +

Existen muchos más selectores para explorar, y podrás encontrar una lista más detallada en la guía de Selectores.

+ +

Fuentes y texto

+ +

Ahora que has explorado lo básico de CSS, empieza por añadir información y algunas reglas más a tu archivo style.css para que tu ejemplo se vea bonito. Primero, haz que tus fuentes y texto luzcan un poco mejor.

+ +
    +
  1. Antes que nada, regresa y busca las fuentes de Google Fonts que guardaste en un lugar seguro. Agrega el elemento {{htmlelement("link")}}... en algún lugar del head de tu archivo index.html (de nuevo, en cualquier lugar entre las etiquetas {{htmlelement("head")}} y </head>). Debe verse algo así: + +
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans" rel="stylesheet" type="text/css">
    +
  2. +
  3. Luego, borra la regla existente en tu archivo style.css. Fue una buena prueba, pero el texto en rojo en realidad no se ve muy bien.
  4. +
  5. +

    Añade las siguientes líneas (que se muestran a continuación), sustituyendo la asignación de font-family por tu selección de font-family que obtuviste en ¿Cuál será la apariencia de tu sitio Web? La propiedad font-family se refiere a la(s) fuente(s) que deseas usar en tu texto. Esta regla define una fuente base global y un tamaño de fuente para usar en toda la página. Dado que {{htmlelement("html")}} es el elemento primario (o padre) de toda la página, todos los elementos contenidos dentro de él heredan las propiedades font-size y font-family):

    + +
    html {
    +  font-size: 10px; /* px quiere decir 'píxeles': el tamaño de la fuente base es ahora de 10 píxeles de altura */
    +  font-family: "Open Sans", sans-serif; /* Este debe ser el resto del resultado que obtuviste de Google fonts */
    +}
    + +
    +

    Nota: se ha añadido un comentario para explicar qué significa «px». Todo lo que está en un documento de CSS entre /* y */ es un comentario en CSS, el cual el navegador descarta cuando carga el código. Este es un espacio donde puedes escribir notas útiles sobre lo que estás haciendo.

    +
    +
  6. +
  7. Ahora escoge el tamaño de fuente para los elementos que contienen texto dentro del cuerpo del HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, y {{htmlelement("p")}}). También centra el texto del título, escoge un ancho de línea y espaciado entre letras en el contenido del texto para hacerlo un poco más legible: +
    h1 {
    +  font-size: 60px;
    +  text-align: center;
    +}
    +
    +p, li {
    +  font-size: 16px;
    +  line-height: 2;
    +  letter-spacing: 1px;
    +}
    +
  8. +
+ +

Puedes ajustar estos valores en px para lograr que tu diseño luzca como desees, pero por lo general tu diseño debe verse así:

+ +

Un logo de Mozilla y algunos párrafos. se ha establecido una fuente sans-serif, se han ajustado los tamaños de las fuentes, la altura de las líneas y el espaciado de las letras, y se ha centrado el encabezamiento de la página principal.

+ +

Cajas, cajas, todo se trata de cajas

+ +

Una cosa que notarás sobre la escritura de CSS es que trata mucho sobre cajas —ajustando su tamaño, color, posición, etc—. Puedes pensar en la mayoría de los elementos HTML de tu página como cajas apiladas una sobre la otra.

+ +

Una gran pila de cajas o cajones puestos uno encima del otro.

+ +

No es de extrañar que el diseño de CSS esté basado principalmente en el modelo de caja. Cada una de las cajas que ocupa espacio en tu página tiene propiedades como estas:

+ + + +

tres cajas puestas una dentro de otra. De fuera a dentro están etiquetadas con el margen, el borde y el relleno

+ +

En esta sección también se utiliza:

+ + + +

Bien, ¡continúa y agrega más código CSS a la página! Sigue añadiendo estas reglas nuevas al final de la página, y no temas experimentar cambiando los valores para ver cómo resulta.

+ +

Cambiar el color de la página

+ +
html {
+  background-color: #00539F;
+}
+ +

Esta regla asigna un color de fondo a la página entera. Puedes cambiar el código de color por cualquiera como el que elegiste usar en tu proyecto.

+ +

Dar estilo al cuerpo del documento

+ +
body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}
+ +

Ahora tienes varias declaraciones en el elemento body. Revisa una por una:

+ + + +

Posicionar y dar estilo al título principal de la página

+ +
h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}
+ +

Puedes haber notado que hay un hueco horrible en la parte superior de body. Esto sucede porque los navegadores vienen con estilos por defecto, ¡incluso cuando aún no se ha aplicado ningún archivo CSS! Esto podría parecer una mala idea, pero se quiere que aun una página sin estilizar sea legible. Para deshacerte de este espacio elimina el estilo por defecto, agregando margin: 0;.

+ +

Enseguida, se ha puesto un relleno arriba y abajo del título de 20 píxeles, y se hizo que el color del texto sea el mismo que el color de fondo de html.

+ +

Una propiedad muy interesante que se ha usado aquí es text-shadow, que aplica una sombra al texto del elemento. Sus cuatro valores son como sigue:

+ + + +

Una vez más, trata de experimentar con diferentes valores para ver cómo resulta.

+ +

Centrar la imagen

+ +
img {
+  display: block;
+  margin: 0 auto;
+}
+ +

Finalmente, centra la imagen para hacer que luzca mejor. Puedes usar nuevamente el truco de margin: 0 auto que usaste antes para body, pero existen diferencias que requieren que hagas algo más para que el código CSS funcione.

+ +

El elemento {{htmlelement("body")}} es un elemento en nivel de bloque (block-level), lo que significa que tomará espacio en la página y que puede tener otros valores de espacio aplicables como margen. Las imágenes, por otra parte, son elementos inline, lo que quiere decir que no puedes aplicarles márgenes, debes dar a la imagen un comportamiento de block-level usando display: block;.

+ +
+

Nota: las instrucciones anteriores asumen que estás usando una imagen más pequeña que el ancho establecido en body (600 píxeles). Si tu imagen es más grande, desbordará el cuerpo, derramándose en el resto de la página. Para solucionar esto, puedes hacer lo siguiente: 1) reducir el ancho de la imagen usando un editor gráfico, o 2) usar CSS para dimensionar la imagen estableciendo la propiedad {{cssxref("width")}} en el elemento <img> con un valor menor.

+
+ +
+

Nota: no te preocupes si aún no entiendes display: block; y la diferencia entre un elemento de bloque y un elemento inline. Lo entenderás en tanto estudies CSS a profundidad. Puedes encontrar más en cuanto a los diferentes valores disponibles para display en la página de referencia de display.

+
+ +

Conclusión

+ +

Si has seguido las instrucciones de esta publicación, deberías terminar con una página que luce algo así (también puedes ver nuestra versión aquí):

+ +

El logo de Mozilla centrado con título y párrafos. Ahora se ve muy bien de estilo, con un fondo azul para toda la página y un fondo naranja para la franja de contenido principal centrada.

+ +

Si te atoraste, puedes comparar tu trabajo con el código del ejemplo finalizado en GitHub.

+ +

Aquí, solo has arañado la superficie de CSS. Si quieres encontrar más, puedes ir a la página de aprendizaje de CSS.

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics","Learn/Getting_started_with_the_web")}}

diff --git "a/files/es/learn/getting_started_with_the_web/c\303\263mo_funciona_la_web/index.html" "b/files/es/learn/getting_started_with_the_web/c\303\263mo_funciona_la_web/index.html" new file mode 100644 index 0000000000..546baf0309 --- /dev/null +++ "b/files/es/learn/getting_started_with_the_web/c\303\263mo_funciona_la_web/index.html" @@ -0,0 +1,100 @@ +--- +title: Cómo funciona la web +slug: Learn/Getting_started_with_the_web/Cómo_funciona_la_Web +tags: + - Cliente + - DNS + - HTTP + - IP + - Infraestructura + - Internet + - Principiante + - Protocolos + - Servidor + - TCP + - Web +translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +--- +
{{LearnSidebar()}}
+ +
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
+ +
+

Cómo funciona la web proporciona una vista simplificada de lo que sucede cuando ves una página web en un navegador web de tu computador o teléfono.

+
+ +

Esta teoría no es esencial para escribir código web a corto plazo, pero en poco tiempo empezarás a beneficiarte realmente al entender lo que está sucediendo en el fondo.

+ +

Los clientes y servidores

+ +

Las computadoras conectadas a la web se llaman clientes y servidores. Un diagrama simplificado de cómo interactúan se vería así:

+ +

+ + + +

Las otras partes de la caja de herramientas

+ +

El cliente y el servidor que describimos anteriormente, no cuentan toda la historia. Hay muchas otras partes involucradas y vamos a describirlas a continuación.

+ +

Por ahora, imaginemos que la web es un camino. En un extremo de la carretera, está el cliente, que es como tu casa. En el extremo opuesto del camino, está el servidor, que es una tienda en la que deseas comprar algo.

+ +

+ +

Además del cliente y el servidor, también tenemos que saludar a:

+ + + +

Entonces, ¿qué sucede exactamente?

+ +

Cuando escribes una dirección web en el navegador (usando nuestra analogía para ir a la tienda):

+ +
    +
  1. El navegador va al servidor DNS y encuentra la dirección real del servidor donde el sitio web vive (encontrar la dirección de la tienda).
  2. +
  3. El navegador envía un mensaje de petición HTTP al servidor, pidiéndole que envíe una copia de la página web para el cliente (ir a la tienda y hacer un pedido). Este mensaje y todos los datos enviados entre el cliente y el servidor, se envían a través de tu conexión a Internet usando TCP/IP.
  4. +
  5. Siempre que el servidor apruebe la solicitud del cliente, el servidor enviará al cliente un mensaje «200 OK», que significa, «¡por supuesto que puedes ver ese sitio web! Aquí está.», y comenzará a enviar los archivos de la página web al navegador como una serie de pequeños trozos llamados paquetes de datos (la tienda te entrega tus productos y los llevas de regreso a casa).
  6. +
  7. El navegador reúne los pequeños trozos, forma un sitio web completo y te lo muestra (llegas a casa con tus nuevas compras).
  8. +
+ +

Explicación de los DNS

+ +

Las direcciones webs reales no son las agradables y fácilmente recordables secuencias que tecleas en la barra de direcciones para encontrar tus sitios webs favoritos. En realidad, se trata de secuencias de números, algo como 63.245.217.105.

+ +

Lo anterior se llama dirección IP y representa un lugar único en la web. Sin embargo, no es muy fácil de recordar, ¿verdad? Por eso se inventaron los servidores de nombres de dominio. Estos son servidores especiales que hacen coincidir una dirección web tecleada desde tu navegador («mozilla.org», por ejemplo) con la dirección real del sitio web (IP).

+ +

Los sitios webs se pueden acceder directamente a través de sus direcciones IP. Intenta acceder a la página web de Mozilla escribiendo 63.245.217.105 en la barra de dirección de una nueva pestaña en tu navegador. Puedes encontrar la dirección IP de un sitio web escribiendo su dominio en una herramienta como IP Checker.

+ +

Un nombre de dominio es más que otra forma de una dirección IP

+ +

Explicación de los paquetes

+ +

Anteriormente hemos utilizado el término paquetes para describir el formato en que los datos se envían desde el servidor al cliente. ¿Qué significa esto? Básicamente, que los datos se envían a través de la web como miles de trozos pequeños, permitiendo que muchos usuarios pueden descargar la misma página web al mismo tiempo. Si los sitios web fueran enviados como grandes trozos, sólo un usuario podría descargarlos a la vez, lo que volvería a la web muy ineficiente y poco divertida.

+ +

Ver también

+ + + +

Crédito

+ +

Foto de la calle: Street Composing, por Kevin D.

+ +

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

diff --git a/files/es/learn/getting_started_with_the_web/html_basics/index.html b/files/es/learn/getting_started_with_the_web/html_basics/index.html new file mode 100644 index 0000000000..e4e4f856a3 --- /dev/null +++ b/files/es/learn/getting_started_with_the_web/html_basics/index.html @@ -0,0 +1,224 @@ +--- +title: 'HTML: básico' +slug: Learn/Getting_started_with_the_web/HTML_basics +tags: + - Aprendizaje + - HTML + - Principiante + - Web +translation_of: Learn/Getting_started_with_the_web/HTML_basics +--- +

{{LearnSideBar}}

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics","Learn/Getting_started_with_the_web")}}

+ +

El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para estructurar y desplegar una página web y sus contenidos. Por ejemplo, sus contenidos podrían ser párrafos, una lista con viñetas, o imágenes y tablas de datos. Como lo sugiere el título, este artículo te dará una comprensión básica de HTML y cúal es su función.

+ +

Entonces, ¿qué es HTML en realidad?

+ +

HTML no es un lenguaje de programación; es un lenguaje de marcado que define la estructura de tu contenido. HTML consiste en una serie de elementos que usarás para encerrar diferentes partes del contenido para que se vean o comporten de una determinada manera. Las etiquetas de encierre pueden hacer de una palabra o una imagen un hipervínculo a otro sitio, se pueden cambiar palabras a cursiva, agrandar o achicar la letra, etc. Por ejemplo, toma la siguiente línea de contenido:

+ +
Mi gato es muy gruñon
+ +

Si quieres especificar que se trata de un párrafo, podrías encerrar el texto con la etiqueta de párrafo ({{htmlelement("p")}}):

+ +
<p>Mi gato es muy gruñon</p>
+ +

Anatomía de un elemento HTML

+ +

Explora este párrafo en mayor profundidad.

+ +

elementos de gato gruñon

+ +

Las partes principales del elemento son:

+ +
    +
  1. La etiqueta de apertura: consiste en el nombre del elemento (en este caso, p), encerrado por paréntesis angulares (< >) de apertura y cierre. Establece dónde comienza o empieza a tener efecto el elemento —en este caso, dónde es el comienzo del párrafo—.
  2. +
  3. La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que incluye una barra de cierre (/) antes del nombre de la etiqueta. Establece dónde termina el elemento —en este caso dónde termina el párrafo—.
  4. +
  5. El contenido: este es el contenido del elemento, que en este caso es sólo texto.
  6. +
  7. El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el contenido equivale al elemento.
  8. +
+ +

Los elementos pueden también tener atributos, que se ven así:

+ +

atributo html

+ +

Los atributos contienen información adicional acerca del elemento, la cual no quieres que aparezca en el contenido real del elemento. Aquí class es el nombre del atributo y editor-note el valor del atributo. En este caso, el atributo class permite darle al elemento un nombre identificativo, que se puede utilizar luego para apuntarle al elemento información de estilo y demás cosas.

+ +

Un atributo debe tener siempre:

+ +
    +
  1. Un espacio entre este y el nombre del elemento (o del atributo previo, si el elemento ya posee uno o más atributos).
  2. +
  3. El nombre del atributo, seguido por un signo de igual (=).
  4. +
  5. Comillas de apertura y de cierre, encerrando el valor del atributo.
  6. +
+ +

Los atributos siempre se incluyen en la etiqueta de apertura de un elemento, nunca en la de cierre.

+ +
+

Nota: el atributo con valores simples que no contengan espacios en blanco ASCII (o cualesquiera de los caracteres " ' ` = < >) pueden permanecer sin entrecomillar, pero se recomienda entrecomillar todos los valores de atributo, ya que esto hace que el código sea más consistente y comprensible.

+
+ +

Anidar elementos

+ +

Puedes también colocar elementos dentro de otros elementos —esto se llama anidamiento—. Si, por ejemplo, quieres resaltar una palabra del texto (en el ejemplo la palabra «muy»), podemos encerrarla en un elemento {{htmlelement("strong")}}, que significa que dicha palabra se debe enfatizar:

+ +
<p>Mi gato es <strong>muy</strong> gruñon.</p>
+ +

Debes asegurarte que los elementos estén correctamente anidados: en el ejemplo de abajo, creaste la etiqueta de apertura del elemento {{htmlelement("p")}} primero, luego la del elemento {{htmlelement("strong")}}, por lo tanto, debes cerrar esta etiqueta primero, y luego la de <p>. Esto es incorrecto:

+ +
<p>Mi gato es <strong>muy gruñon.</p></strong>
+ +

Los elementos deben abrirse y cerrarse ordenadamente, de forma tal que se encuentren claramente dentro o fuera el uno del otro. Si estos se encuentran solapados, el navegador web tratará de adivinar lo que intentas decirle, pero puede que obtengas resultados inesperados. Así que, ¡no lo hagas!

+ +

Elementos vacíos

+ +

Algunos elementos no poseen contenido, y son llamados elementos vacíos. Toma, por ejemplo, el elemento {{htmlelement("img")}} de nuestro HTML:

+ +
<img src="images/firefox-icon.png" alt="Mi imagen de prueba">
+ +

Posee dos atributos, pero no hay etiqueta de cierre </img> ni contenido encerrado. Esto es porque un elemento de imagen no encierra contenido al cual afectar. Su propósito es desplegar una imagen en la página HTML, en el lugar en que aparece.

+ +

Anatomía de un documento HTML

+ +

Hasta ahora has visto lo básico de elementos HTML individuales, pero estos no son muy útiles por sí solos. Ahora verás cómo los elementos individuales son combinados para formar una página HTML entera. Vuelve a visitar el código de tu ejemplo en index.html (que viste por primera vez en el artículo Manejo de archivos):

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Mi pagina de prueba</title>
+  </head>
+  <body>
+    <img src="images/firefox-icon.png" alt="Mi imagen de prueba">
+  </body>
+</html>
+ +

Tienes:

+ + + +

Imágenes

+ +

Presta atención nuevamente al elemento imagen {{htmlelement("img")}}:

+ +
<img src="images/firefox-icon.png" alt="Mi imagen de prueba">
+ +

Como ya se dijo antes, incrusta una imagen en la página, en la posición en que aparece. Lo logra a través del atributo src (source), el cual contiene el path (ruta o ubicación) de tu archivo de imagen.

+ +

También se incluye un atributo alt (alternative) el cual contiene un texto que debería describir la imagen, y que podría ser accedido por usuarios que no pueden ver la imagen, quizás porque:

+ +
    +
  1. Son ciegos o tienen deficiencias visuales. Los usuarios con impedimentos visuales usualmente utilizan herramientas llamadas Lectores de pantalla (Screen Readers), los cuales les leen el texto contenido en el atributo alt.
  2. +
  3. Se produjo algún error en el código que impide que la imagen sea cargada. Como ejemplo, modifica deliberadamente la ubicación dentro del atributo src para que este sea incorrecto. Si guardas y recargas la página, deberías ver algo así en lugar de la imagen:
  4. +
+ +

atributo html

+ +

La frase clave acerca del texto alt de arriba es «texto que debería describir la imagen». El texto alt debe proporcionarle al lector la suficiente información como para que este tenga una buena idea de qué muestra la imagen. Por lo que tu texto actual «Mi imagen de prueba» no es para nada bueno. Un texto mucho mejor para el logo de Firefox sería: «El logo de Firefox: un zorro en llamas rodeando la Tierra».

+ +

Prueba a dar con mejores textos alt para tu imagen.

+ +
+

Nota: Descubre más acerca de la accesibilidad en el módulo de aprendizaje sobre la accesibilidad.

+
+ +

Marcado de texto

+ +

Esta sección cubrirá algunos de los elementos HTML básicos que usarás para el marcado de texto.

+ +

Encabezados

+ +

Los elementos de encabezado permiten especificar que ciertas partes del contenido son encabezados, o subencabezados del contenido. De la misma forma que un libro tiene un título principal, y que a su vez puede tener títulos por cada capítulo individual, y subtítulos dentro de ellos, un documento HTML puede tenerlos también. HTML posee seis niveles de encabezados, {{htmlelement("h1")}}–{{htmlelement("h6")}}, aunque probablemente solo llegues a usar 3-4 como mucho:

+ +
<h1>Mi título principal</h1>
+<h2>Mi título de nivel superior</h2>
+<h3>Mi subtítulo</h3>
+<h4>Mi sub-subtítulo</h4>
+ +

Intenta ahora añadir un título apropiado para tu página HTML, antes de tu elemento {{htmlelement("img")}}.

+ +
+

Nota: verás que el encabezamiento de nivel 1 tiene un estilo implícito. No utilices elementos de encabezado para hacer el texto más grande o más oscuro, porque este elemento se utiliza por accesibilidad y otras razones como el posicionamiento en buscadores (Search Engine Optimization, SEO). Intenta crear una secuencia significativa de encabezados en tus páginas, sin saltarte niveles.

+
+ +

Párrafos

+ +

Como se explicó más arriba, los elementos {{htmlelement("p")}} se utilizan para encerrar párrafos de texto; los usarás frecuentemente para el marcado de contenido de texto regular:

+ +
<p>Este es un simple parrafo</p>
+ +

Agrega uno o algunos párrafos a tu texto de ejemplo (deberías tenerlo de cuando estudiaste ¿Cuál será la apariencia de tu sitio web?), colocados directamente debajo del elemento <img>.

+ +

Listas

+ +

Mucho del contenido web está dado por listas, así que HTML tiene elementos especiales para ellas. El marcado de listas se realiza siempre en al menos dos elementos. Los dos tipos de listas más comunes son las listas ordenadas y las desordenadas:

+ +
    +
  1. Las listas desordenadas son aquellas en las que el orden de los items no es relevante, como en una lista de compras. Estas son encerradas en un elemento {{htmlelement("ul")}} (unordered list).
  2. +
  3. Las listas ordenadas son aquellas en las que el orden sí es relevante, como en una receta. Estas son encerradas en un elemento {{htmlelement("ol")}} (ordered list).
  4. +
+ +

Cada elemento de la lista se coloca dentro de un elemento {{htmlelement("li")}} (list item).

+ +

Por ejemplo, si quieres transformar parte del siguiente párrafo en una lista:

+ +
<p>En Mozilla, somos una comunidad de tecnólogos, pensadores, y constructores que trabajan juntos... </p>
+ +

Podrías hacer lo siguiente:

+ +
<p>En Mozilla, somos una comunidad de</p>
+
+<ul>
+  <li>tecnólogos</li>
+  <li>pensadores</li>
+  <li>constructores</li>
+</ul>
+
+<p>trabajando juntos... </p>
+ +

Intenta agregar una lista ordenada o desordenada en tu página de ejemplo.

+ +

Vínculos

+ +

Los vínculos o enlaces son muy importantes —son los que hacen de la web, la web—. Para implementar un vínculo, necesitas usar un vínculo simple — {{htmlelement("a")}} — la a es la abreviatura de la palabra inglesa «anchor» («ancla»). Para convertir algún texto dentro de un párrafo en un vínculo, sigue estos pasos:

+ +
    +
  1. Elige algún texto. Nosotros elegimos «Manifesto Mozilla».
  2. +
  3. Encierra el texto en un elemento <a>, así: +
    <a>Manifesto Mozilla</a>
    +
  4. +
  5. Proporciónale al elemento <a> un atributo href, así: +
    <a href="">Manifesto Mozilla</a>
    +
  6. +
  7. Completa el valor de este atributo con la dirección web con la que quieras conectar al vínculo: +
    <a href="https://www.mozilla.org/es-AR/about/manifesto/">Manifesto Mozilla</a>
    +
  8. +
+ +

Podrías obtener resultados inesperados si al comienzo de la dirección web omites la parte https:// o http:// llamada protocolo. Así que luego del marcado del vínculo, haz clic en él para asegurarte que te dirige a la dirección deseada.

+ +
+

href podría parecer, en principio, una opción un tanto oscura para un nombre de atributo. Si tienes problemas para recordarla, recuerda que se refiere a hypertext reference (referencia de hipertexto).

+
+ +

Ahora agrega un vínculo a tu página, si es que aún no lo hiciste.

+ +

Conclusión

+ +

Si lograste seguir todas las instrucciones de este artículo, deberías terminar con una página que se vea así (también puedes verla aquí):
+
+ Una captura de pantalla de la página web que muestra el logo de Firefox, un encabezado que dice «mozilla es genial» y dos párrafos de texto de relleno.

+ +

Si te estancas en algún paso, puedes comparar tu trabajo con el código de ejemplo terminado en Github.

+ +

Aquí realmente solo has rasguñado la superficie de HTML. Para aprender más, ve a la página de Aprendizaje HTML.

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics","Learn/Getting_started_with_the_web")}}

diff --git a/files/es/learn/getting_started_with_the_web/index.html b/files/es/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..05cadcde6c --- /dev/null +++ b/files/es/learn/getting_started_with_the_web/index.html @@ -0,0 +1,68 @@ +--- +title: Primeros pasos en la Web +slug: Learn/Getting_started_with_the_web +tags: + - CSS + - Diseño + - Guía + - HTML + - Index + - Novato + - Principiante + - edición + - editor + - 'l10n:priority' + - teoria + - Índice +translation_of: Learn/Getting_started_with_the_web +--- +
{{LearnSidebar}}
+ +
+

Introducción a la Web es una serie concisa que te presenta los aspectos prácticos del desarrollo web. Configurarás las herramientas que necesitas para construir una sencilla página web y publicar tu propio código.

+
+ +

La historia de tu primer sitio web

+ +

Es mucho trabajo crear un sitio web profesional, así que si eres nuevo en el desarrollo web, te animamos a que empieces poco a poco. No crearás otro Facebook de inmediato, pero no es difícil tener tu propio sitio web sencillo en línea, así que comenzaremos por ahí.

+ +

Al trabajar en orden a través de los artículos que se enumeran a continuación, pasarás de la nada a tener tu primera página web en línea. ¡Comencemos nuestro viaje!

+ +

{{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software","Instalación de software básico")}}

+ +

Cuando se trata de herramientas para crear un sitio web, hay mucho para elegir. Si recién estás comenzando, es posible que te sientas confundido por la variedad de editores de código, marcos de desarrollo y herramientas de prueba que existen. En {{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software", "Instalación de software básico")}}, te mostramos paso a paso cómo instalar solo el software que necesitas para comenzar un desarrollo web básico.

+ +

{{web.link("/es/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like","¿Cuál será la apariencia de tu sitio web?")}}

+ +

Antes de comenzar a escribir el código para tu sitio web, primero lo debes planificar. ¿Qué información estás mostrando?, ¿qué fuentes y colores estás usando?, en {{web.link("/es/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like", "¿cuál será la apariencia de tu sitio web?")}}, describimos un método simple que puedes seguir para planificar el contenido y modelado de tu sitio.

+ +

{{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files","Manejo de archivos")}}

+ +

Un sitio web consta de muchos archivos: texto del contenido, código, hojas de estilo, contenido multimedia, etc. Cuando estás creando un sitio web, necesitas ensamblar estos archivos en una estructura sensata y asegurarte de que se puedan comunicar entre sí. {{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files", "Manejo de archivos")}} explica cómo configurar una estructura de archivos sensible para tu sitio web y qué problemas debes tener en cuenta.

+ +

{{web.link("/es/docs/Learn/Getting_started_with_the_web/HTML_basics","Conceptos básicos de HTML")}}

+ +

El lenguaje de marcado de hipertexto (HTML) es el código que utilizas para estructurar tu contenido web y darle significado y propósito. Por ejemplo, ¿mi contenido es un conjunto de párrafos o una lista de viñetas?, ¿tengo imágenes insertadas en mi página?, ¿tengo una tabla de datos?; Sin abrumarte, {{web.link("/es/docs/Learn/Getting_started_with_the_web/HTML_basics", "conceptos básicos de HTML")}} proporciona suficiente información para familiarizarte con HTML.

+ +

{{web.link("/es/docs/Learn/Getting_started_with_the_web/CSS_basics","Conceptos básicos de CSS")}}

+ +

Hojas de estilo en cascada (CSS) es el código que utilizas para aplicar estilo a tu sitio web. Por ejemplo, ¿desea que el texto sea negro o rojo?, ¿dónde se debe dibujar el contenido en la pantalla?, ¿qué imágenes de fondo y colores se deben utilizar para decorar tu sitio web?, {{web.link("/es/docs/Learn/Getting_started_with_the_web/CSS_basics", "Conceptos básicos de CSS")}} te indica lo que necesitas para empezar.

+ +

{{web.link("/es/docs/Learn/Getting_started_with_the_web/JavaScript_basics","Conceptos básicos de JavaScript")}}

+ +

JavaScript es el lenguaje de programación que utilizas para agregar funciones interactivas a tu sitio web. Algunos ejemplos podrían ser juegos, cosas que suceden cuando se presionan botones o se ingresan datos en formularios, efectos de estilo dinámico, animación y mucho más. {{web.link("/es/docs/Learn/Getting_started_with_the_web/JavaScript_basics", "Conceptos básicos de JavaScript")}} te da una idea de lo que es posible con este interesante lenguaje y cómo empezar.

+ +

{{web.link("/es/docs/Learn/Getting_started_with_the_web/Publishing_your_website","Publicar tu sitio web")}}

+ +

Una vez que hayas terminado de escribir el código y organizado los archivos que componen tu sitio web, lo debes poner todo en línea para que la gente lo pueda encontrar. {{web.link("/es/docs/Learn/Getting_started_with_the_web/Publishing_your_website", "Publica tu código de ejemplo")}} describe cómo publicar tu código de ejemplo en línea con el mínimo esfuerzo.

+ +

{{web.link("/es/docs/Learn/Getting_started_with_the_web/How_the_Web_works","Cómo funciona la web")}}

+ +

Cuando accedes a tu sitio web favorito, suceden muchas cosas complicadas en segundo plano que quizás no conozcas. {{web.link("/es/docs/Learn/Getting_started_with_the_web/How_the_Web_works", "Cómo funciona la web")}} describe lo que sucede cuando ves una página web en tu dispositivo favorito.

+ +

Ve también

+ + diff --git a/files/es/learn/getting_started_with_the_web/instalacion_de_software_basico/index.html b/files/es/learn/getting_started_with_the_web/instalacion_de_software_basico/index.html new file mode 100644 index 0000000000..84ffdcf666 --- /dev/null +++ b/files/es/learn/getting_started_with_the_web/instalacion_de_software_basico/index.html @@ -0,0 +1,83 @@ +--- +title: Instalación de software básico +slug: Learn/Getting_started_with_the_web/Instalacion_de_software_basico +tags: + - Aprender + - Configuración + - Herramientas + - Navegadores + - Novato + - Principiantes + - aprende + - buscador + - editor de textos + - instalar + - 'l10n:priority' +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
+ +
+

La Instalación de software básico, te muestra las herramientas que necesitas para hacer el desarrollo web simple, y la forma de instalarlas correctamente.

+
+ +

¿Qué herramientas usan los profesionales?

+ + + +

Ahora mismo: ¿qué herramientas necesitas realmente?

+ +

Esto parece una lista espeluznante pero, afortunadamente, puedes comenzar a trabajar en el desarrollo web sin saber nada de la mayoría de estas herramientas. En este artículo solo tendrás que configurar lo mínimo: un editor de texto y algunos navegadores web modernos.

+ +

Instalación de un editor de texto

+ +

Probablemente ya tengas un editor de texto básico instalado en tu computadora. De manera predeterminada Windows incluye el {{Interwiki("wikipedia", "Bloc de notas")}} y OS X viene con {{Interwiki("wikipedia", "TextEdit")}}. Las distros (versiones) de Linux varían: Ubuntu viene con {{Interwiki("wikipedia", "Gedit")}}; distribuciones basadas en KDE suelen traer Kate o Kwrite.

+ +

Para el desarrollo Web, probablemente hay cosas mejores que el Bloc de notas o TextEdit. Una recomendación puede ser empezar con Brackets, un editor gratuito que ofrece vistas previas en vivo y sugerencias de código.

+ +

Instalación de navegadores web modernos

+ +

Por ahora, solo tendrás que instalar un par de navegadores web de escritorio para poner a prueba tu código. Selecciona tu sistema operativo y pulsa los enlaces pertinentes para descargar los instaladores de tus navegadores preferidos:

+ + + +

Antes de continuar, deberías instalar al menos dos de estos navegadores y tenerlos disponibles para pruebas.

+ +
+

Nota: Internet Explorer no es compatible con algunas funciones web modernas y es posible que no puedas ejecutar tu proyecto. Por lo general, no necesitas preocuparte por hacer que tus proyectos web sean compatibles con él, ya que muy pocas personas todavía lo usan; ciertamente, no te preocupes demasiado por él mientras aprendes. En ocasiones, es posible que te encuentres con un proyecto que requiera soporte.

+
+ +

Instalación de un servidor web local

+ +

Algunos ejemplos necesitarás ejecutarlos a través de un servidor web para que funcionen exitosamente. Puedes encontrar cómo hacer esto en {{web.link("/es/docs/Learn/Common_questions/set_up_a_local_testing_server", "¿Cómo se configura un servidor de prueba local?")}}

+ +

{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/getting_started_with_the_web/javascript_basics/index.html b/files/es/learn/getting_started_with_the_web/javascript_basics/index.html new file mode 100644 index 0000000000..78fa13eccb --- /dev/null +++ b/files/es/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,456 @@ +--- +title: Fundamentos de JavaScript +slug: Learn/Getting_started_with_the_web/JavaScript_basics +tags: + - Aprender + - CodingScripting + - JavaScript + - Novato + - Principiante + - Web + - 'l10n:priority' +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext( "Learn/Getting_started_with_the_web/CSS_basics","Learn/Getting_started_with_the_web/Publishing_your_website","Learn/Getting_started_with_the_web")}}
+ +
+

JavaScript es el lenguaje de programación que debes usar para añadir características interactivas a tu sitio web, (por ejemplo, juegos, eventos que ocurren cuando los botones son presionados o los datos son introducidos en los formularios, efectos de estilo dinámicos, animación, y mucho más). Este artículo te ayudará a comenzar con este lenguaje extraordinario y te dará una idea de qué es posible hacer con él.

+
+ +

¿Qué es JavaScript realmente?

+ +

{{Glossary("JavaScript")}} es un robusto lenguaje de programación que se puede aplicar a un documento {{Glossary("HTML")}} y usarse para crear interactividad dinámica en los sitios web. Fue inventado por Brendan Eich, cofundador del proyecto Mozilla, Mozilla Foundation y la Corporación Mozilla.

+ +

Puedes hacer casi cualquier cosa con JavaScript. Puedes empezar con pequeñas cosas como carruseles, galerías de imágenes, diseños fluctuantes, y respuestas a las pulsaciones de botones. Con más experiencia, serás capaz de crear juegos, animaciones 2D y gráficos 3D, aplicaciones integradas basadas en bases de datos ¡y mucho más!

+ +

JavaScript por sí solo es bastante compacto aunque muy flexible, y los desarrolladores han escrito gran cantidad de herramientas encima del núcleo del lenguaje JavaScript, desbloqueando una gran cantidad de funcionalidad adicional con un mínimo esfuerzo. Esto incluye:

+ + + +

Ya que se supone que este artículo es solo una introducción ligera a JavaScript, la intención no es confundirte en esta etapa hablando en detalle sobre cuál es la diferencia entre el núcleo del lenguaje JavaScript y las diferentes herramientas listadas arriba. Puedes aprender todo eso en detalle más tarde, en el Área de Aprendizaje en MDN, y en el resto de MDN.

+ +

Debajo se presentan algunos aspectos del núcleo del lenguaje y también jugarás con unas pocas características de la API del navegador. ¡Diviértete!

+ +

Ejemplo «¡Hola Mundo!»

+ +

La sección de arriba suena realmente emocionante, y debería serlo. JavaScript es una de las tecnologías web más emocionantes, y cuando comiences a ser bueno en su uso, tus sitios web entrarán en una nueva dimensión de energía y creatividad.

+ +

Sin embargo, sentirse cómodo con JavaScript es un poco más difícil que sentirse cómodo con HTML y CSS. Deberás comenzar poco a poco y continuar trabajando en pasos pequeños y consistentes. Para comenzar, mostraremos cómo añadir JavaScript básico a tu página, creando un «¡Hola Mundo!» de ejemplo (el estándar en los ejemplos básicos de programación).

+ +
+

Importante: si no has venido siguiendo el resto de nuestro curso, descarga este código de ejemplo y úsalo como punto de partida.

+
+ +
    +
  1. Primero, ve a tu sitio de pruebas y crea una carpeta llamada scripts. Luego, dentro de la nueva carpeta de scripts, crea un nuevo archivo llamado main.js y guárdalo.
  2. +
  3. A continuación, abre tu archivo index.html e introduce el siguiente código en una nueva línea, justo antes de la etiqueta de cierre </body>: +
    <script src="scripts/main.js"></script>
    +
  4. +
  5. Esto hace básicamente el mismo trabajo que el elemento {{htmlelement("link")}} para CSS: aplica el código JavaScript a la página, para que pueda actuar sobre el HTML (y CSS, o cualquier cosa en la página).
  6. +
  7. Ahora añade el siguiente código al archivo main.js: +
    const miTitulo = document.querySelector('h1');
    +miTitulo.textContent = '¡Hola mundo!';
    +
  8. +
  9. Finalmente, asegúrate de que has guardado los archivos HTML y JavaScript, y abre index.html en el navegador. Deberías ver algo así:
  10. +
+ +
+

Nota: la razón por la que has puesto el elemento {{htmlelement("script")}} casi al final del documento HTML es porque el navegador carga el HTML en el orden en que aparece en el archivo.

+ +

Si se cargara primero JavaScript y se supone que debe afectar al HTML que tiene debajo, podría no funcionar, ya que ha sido cargado antes que el HTML sobre el que se supone debe trabajar. Por lo tanto, colocar el JavaScript cerca del final de la página es normalmente la mejor estrategia. Para aprender más sobre enfoques alternativos, mira Estrategias de carga de scripts.

+
+ +

¿Qué ha ocurrido?

+ +

El texto del título ha sido cambiado por ¡Hola mundo! usando JavaScript. Hiciste esto primero usando la función {{domxref("Document.querySelector", "querySelector()")}} para obtener una referencia al título y almacenarla en una variable llamada miTitulo. Esto es muy similar a lo que hiciste con CSS usando selectores —quieres hacer algo con un elemento, así que tienes que seleccionarlo primero—.

+ +

Después de eso, estableciste el valor de la propiedad {{domxref("Node.textContent", "textContent")}} de la variable miTitulo (que representa el contenido del título) como ¡Hola mundo!

+ +
+

Nota: Las dos características que has utilizado en este ejercicio forman parte de la API del Modelo de Objeto de Documento (DOM), que tiene la capacidad de manipular documentos.

+
+ +

Curso intensivo de fundamentos del lenguaje

+ +

Ahora se explicarán algunas de las funciones básicas del lenguaje JavaScript para que puedas comprender mejor cómo funciona todo. Mejor aún, estas características son comunes para todos los lenguajes de programación. Si puedes entender esos fundamentos, deberías ser capaz de comenzar a programar en casi cualquier cosa.

+ +
+

Importante: en este artículo, trata de introducir las líneas de código de ejemplo en la consola de tu navegador para ver lo que sucede. Para más detalles sobre consolas JavaScript, mira Descubre las herramientas de desarrollo de los navegadores.

+
+ +

Variables

+ +

Las {{Glossary("Variable", "Variables")}} son contenedores en los que puedes almacenar valores. Primero debes declarar la variable con la palabra clave var (menos recomendado) o let, seguida del nombre que le quieras dar. Se recomienda más el uso de let que de var (más adelante se profundiza un poco sobre esto):

+ +
let nombreDeLaVariable;
+ +
+

Nota: todas las líneas en JS deben acabar en punto y coma (;) para indicar que es ahí donde termina la declaración. Si no los incluyes puedes obtener resultados inesperados. Sin embargo, algunas personas creen que es una buena práctica tener punto y coma al final de cada declaración. Hay otras reglas para cuando se debe y no se debe usar punto y coma. Para más detalles, vea Guía del punto y coma en JavaScript (en inglés).

+
+ +
+

Nota: puedes llamar a una variable con casi cualquier nombre, pero hay algunas restricciones (ver este artículo sobre las reglas existentes). Si no estás seguro, puedes comprobar el nombre de la variable para ver si es válido.

+
+ +
+

Nota: JavaScript distingue entre mayúsculas y minúsculas. miVariable es una variable distinta a mivariable. Si estás teniendo problemas en tu código, revisa las mayúsculas y minúsculas.

+
+ +
+

Nota: para más detalles sobre la diferencia entre var y let, vea Diferencia entre var y let.

+
+ +

Tras declarar una variable, puedes asignarle un valor:

+ +
nombreDeLaVariable = 'Bob';
+ +

Puedes hacer las dos cosas en la misma línea si lo necesitas:

+ +
let nombreDeLaVariable = 'Bob';
+ +

Puedes obtener el valor de la variable llamándola por su nombre:

+ +
nombreDeLaVariable;
+ +

Después de haberle dado un valor a la variable, puedes volver a cambiarlo:

+ +
let nombreDeLaVariable = 'Bob';
+nombreDeLaVariable = 'Steve';
+ +

Advierte que las variables tienen distintos tipos de datos:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VariableExplicaciónEjemplo
{{Glossary("String","String")}}Esto es una secuencia de texo conocida como cadena. Para indicar que la variable es una cadena, debes escribirlo entre comillas.let miVariable = 'Bob';
{{Glossary("Number")}} +

Esto es un número. Los números no tienen comillas.

+
let miVariable = 10;
{{Glossary("Boolean")}}Tienen valor verdadero/falso. true/false son palabras especiales en JS, y no necesitan comillas.let miVariable = true;
{{Glossary("Array")}}Una estructura que te permite almacenar varios valores en una sola referencia.let miVariable = [1,'Bob','Steve',10];
+ Llama a cada miembro del array así: miVariable[0], miVariable[1], etc.
{{Glossary("Object")}} +

Básicamente cualquier cosa. Todo en JavaScript es un objeto y puede ser almacenado en una variable. Mantén esto en mente mientras aprendes.

+
let miVariable = document.querySelector('h1');
+ Todos los ejemplos anteriores también.
+ +

Entonces, ¿para qué necesitamos las variables? Las variables son necesarias para hacer cualquier cosa interesante en programación. Si los valores no pudieran cambiar, entonces no podrías hacer nada dinámico, como personalizar un mensaje de bienvenida de un usuario que visita tu página, cambiar la imagen que se muestra en una galería de imágenes, etc.

+ +

Comentarios

+ +

Puedes escribir comentarios entre el código JavaScript, igual que puedes en CSS. El navegador ignora el texto marcado como comentario. En JavaScript, los comentarios de una sola línea se escriben así:

+ +
// Esto es un comentario
+ +

Pero también puedes escribir comentarios en más de una línea, igual que en CSS:

+ +
/*
+Esto es un comentario
+de varias líneas.
+*/
+ +

Operadores

+ +

Un {{Glossary("operator", "operador")}} es básicamente un símbolo matemático que puede actuar sobre dos valores (o variables) y producir un resultado. En la tabla de abajo aparecen los operadores más simples, con algunos ejemplos para probarlos en la consola del navegador.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperadorExplicaciónSímbolo(s)Ejemplo
Suma/concatenaSe usa para sumar dos números, o juntar dos cadenas en una.+6 + 9;
+ "Hola " + "mundo!";
Resta, multiplicación, divisiónEstos hacen lo que esperarías que hicieran en las matemáticas básicas.-, *, /9 - 3;
+ 8 * 2; // La multiplicación en JS es un asterisco
+ 9 / 3;
Operador de asignaciónLos has visto anteriormente: asigna un valor a una variable.=let miVariable = 'Bob';
identidad/igualdadComprueba si dos valores son iguales entre sí, y devuelve un valor de true/false (booleano).===let miVariable = 3;
+ miVariable === 4;
Negación, distinto (no igual)
+ En ocasiones utilizado con el operador de identidad, la negación es en JS el equivalente al operador lógico NOT — cambia true por false y viceversa.
!, !== +

La expresión básica es true, pero la comparación devuelve false porque lo hemos negado:

+ +

let miVariable = 3;
+ !miVariable === 3;

+ +

Aquí estamos comprobando "miVariable NO es igual a 3". Esto devuelve false, porque miVariable ES igual a 3.

+ +

let miVariable = 3;
+ miVariable !== 3;

+
+ +

Hay muchos operadores por explorar, pero con esto será suficiente por ahora. Mira Expresiones y operadores para ver la lista completa.

+ +
+

Nota: mezclar tipos de datos puede dar lugar a resultados extraños cuando se hacen cálculos, así que asegúrate de que relacionas tus variables correctamente y de que recibes los resultados que esperabas. Por ejemplo, teclea: "3" + "25" en tu consola. ¿Por qué no obtienes lo que esperabas? Porque las comillas convierten los números en "strings" (el término inglés para denominar cadenas de caracteres) y de este modo has acabado con los "strings" concatenados entre sí, y no con los números sumados. Si tecleas: 35 + 25, obtendrás el resultado correcto.

+
+ +

Condicionales

+ +

Las condicionales son estructuras de código que permiten comprobar si una expresión devuelve true o no, y después ejecuta un código diferente dependiendo del resultado. La forma de condicional más común es la llamada if... else. Entonces, por ejemplo:

+ +
let helado = 'chocolate';
+if (helado === 'chocolate') {
+  alert('¡Sí, amo el helado de chocolate!');
+} else {
+  alert('Awwww, pero mi favorito es el de chocolate...');
+}
+ +

La expresión dentro de if (... ) es el criterio — este usa al operador de identidad (descrito arriba) para comparar la variable helado con la cadena chocolate para ver si las dos son iguales. Si esta comparación devuelve true, el primer bloque de código se ejecuta. Si no, ese código se omite y se ejecuta el segundo bloque de código después de la declaración else.

+ +

Funciones

+ +

Las {{Glossary("Function", "funciones")}} son una manera de encapsular una funcionalidad que quieres reutilizar, de manera que puedes llamar esa función con un solo nombre, y no tendrás que escribir el código entero cada vez que la utilices. Ya has visto algunas funciones más arriba, por ejemplo:

+ +
    +
  1. +
    let nombreDeLaVariable = document.querySelector('h1');
    +
  2. +
  3. +
    alert('¡Hola!');
    +
  4. +
+ +

Estas funciones document.querySelector y alert están integradas en el navegador para poder utilizarlas en cualquier momento.

+ +

Si ves algo que parece un nombre de variable, pero tiene paréntesis —()— al final, probablemente es una función. Las funciones con frecuencia toman {{Glossary("Argument", "argumentos")}} —pedazos de datos que necesitan para hacer su trabajo—. Estos se colocan dentro de los paréntesis, y se separan con comas si hay más de uno.

+ +

Por ejemplo, la función alert() hace aparecer una ventana emergente dentro de la ventana del navegador, pero necesitas asignarle una cadena como argumento para decirle qué mensaje se debe escribir en la ventana emergente.

+ +

Las buenas noticias son que podemos definir nuestras propias funciones —en el siguiente ejemplo escribimos una función simple que toma dos números como argumentos y los multiplica entre sí—:

+ +
function multiplica(num1,num2) {
+  let resultado = num1 * num2;
+  return resultado;
+}
+ +

Trata de ejecutar la función anterior en la consola. Después trata de usar la nueva función algunas veces, p.ej:

+ +
multiplica(4, 7);
+multiplica(20, 20);
+multiplica(0.5, 3);
+
+ +
+

Nota: la sentencia return le dice al navegador que devuelva la variable resultado fuera de la función, para que esté disponible para su uso. Esto es necesario porque las variables definidas dentro de funciones, solo están disponibles dentro de esas funciones. Esto se conoce como «{{Glossary("Scope", "ámbito")}} (scope en inglés) de la variable». Lee más sobre ámbito o alcance de la variable.

+
+ +

Eventos

+ +

Para crear una interacción real en tu sitio web, debes usar eventos. Estos son unas estructuras de código que captan lo que sucede en el navegador, y permite que en respuesta a las acciones que suceden se ejecute un código. El ejemplo más obvio es un clic (click event), que se activa al hacer clic sobre algo. Para demostrar esto, prueba ingresando lo siguiente en tu consola, luego da clic sobre la página actual:

+ +
document.querySelector('html').onclick = function() {
+    alert('¡Ouch! ¡Deja de pincharme!');
+}
+
+ +

Hay muchas maneras de enlazar un evento a un elemento; aquí hemos seleccionado el elemento {{htmlelement("html")}} y le asignamos a su propiedad onclick una función anónima (función sin nombre) que contiene el código que se ejecutará cuando el evento suceda.

+ +

Nota que

+ +
document.querySelector('html').onclick = function(){};
+
+ +

es equivalente a

+ +
let miHTML = document.querySelector('html');
+miHTML.onclick = function(){};
+
+ +

es solo un modo más corto de escribirlo.

+ +

Sobrecargar tu sitio web de ejemplo

+ +

Ahora vas a repasar un poco lo básico de JavaScript. Añadirás un par de funcionalidades a tu sitio para demostrar lo que puedes hacer.

+ +

Añadir un cambiador de imagen

+ +

En esta sección añadirás otra imagen a tu sitio usando la DOM API y agregarás un poco de código para cambiar entre imágenes al hacer clic.

+ +
    +
  1. Primero que todo, busca una imagen que te guste para tu sitio. Asegúrate que sea del mismo tamaño que la primera, o lo más cerca posible.
  2. +
  3. Guarda tu imagen en tu carpeta images.
  4. +
  5. Renombra esta imagen «firefox2.png» (sin las comillas).
  6. +
  7. Ve a tu archivo main.js y agrega el siguiente JavaScript (si tu JavaScript de «Hola Mundo» está aún allí, bórralo). +
    let miImage = document.querySelector('img');
    +miImage.onclick = function () {
    +    let miSrc = miImage.getAttribute('src');
    +    if (miSrc === 'images/firefox-icon.png') {
    +      miImage.setAttribute('src','images/firefox2.png');
    +    } else {
    +      miImage.setAttribute('src', 'images/firefox-icon.png');
    +    }
    +}
    +
  8. +
  9. Guarda todos los archivos y carga index.html en tu navegador. Ahora cuando hagas clic en la imagen, ¡esta debe cambiar por otra!
  10. +
+ +

Esto fue lo que sucedió: se almacena una referencia a tu elemento {{htmlelement("img")}} en la variable miImage. Luego, haces que esta propiedad del manejador de evento onclick de la variable sea igual a una función sin nombre (una función «anónima»). Ahora, cada vez que se haga clic en la imagen:

+ +
    +
  1. El código recupera el valor del atributo src de la imagen.
  2. +
  3. El código usa una condicional para comprobar si el valor src es igual a la ruta de la imagen original: +
      +
    1. Si es así, el código cambia el valor de src a la ruta de la segunda imagen, forzando a que se cargue la otra imagen en el elemento {{htmlelement("img")}}.
    2. +
    3. Si no es así (significa que ya fue modificada), se cambiará el valor de src nuevamente a la ruta de la imagen original, regresando a como era en un principio.
    4. +
    +
  4. +
+ +

Añadir un mensaje de bienvenida personalizado

+ +

Ahora añadirás un poco más de código, para cambiar el título de la página o incluir un mensaje personalizado de bienvenida para cuando el usuario ingrese por primera vez. Este mensaje de bienvenida permanecerá luego de que el usuario abandone la página y estará disponible para cuando regrese. Lo guardarás usando Web Storage API. También se incluirá una opción para cambiar el usuario y por lo tanto también el mensaje de bienvenida en cualquier momento que se requiera.

+ +
    +
  1. En index.html, agrega el siguiente código antes del elemento {{htmlelement("script")}}: + +
    <button>Cambiar de usuario</button>
    +
  2. +
  3. En main.js, agrega el siguiente código al final del archivo, exactamente como está escrito. Esto toma referencia al nuevo botón que se agregó y al título y los almacena en variables: +
    let miBoton = document.querySelector('button');
    +let miTitulo = document.querySelector( 'h1');
    +
  4. +
  5. Ahora agrega la siguiente función para poner el saludo personalizado, lo que no causará nada aún, pero arreglarás esto en un momento: +
    function estableceNombreUsuario() {
    +    let miNombre = prompt('Por favor, ingresa tu nombre.');
    +    localStorage.setItem('nombre', miNombre);
    +    miTitulo.textContent = 'Mozilla es genial,' + miNombre;
    +}
    + La función estableceNombreUsuario() contiene una función prompt(), que crea un cuadro de diálogo como lo hace alert(); la diferencia es que prompt() pide al usuario un dato, y almacena este dato en una variable cuando el botón Aceptar del cuadro de diálogo es presionado. En este caso, pedirás al usuario que ingrese su nombre. Luego, llamarás la API localStorage, que nos permite almacenar datos en el navegador y recuperarlos luego. Usarás la función setItem() de localStorage, que crea y almacena un dato en el elemento llamado 'nombre', y coloca este valor en la variable miNombre que contiene el nombre que el usuario ingresó. Finalmente, establecerás el textContent del título a una cadena, más el nombre de usuario recientemente almacenado.
  6. +
  7. Luego, agregarás este bloque if ... else. Se podría llamar a esto el código de inicialización, como se ha establecido para cuando carga la app por primera vez: +
    if (!localStorage.getItem('nombre')) {
    +    estableceNombreUsuario();
    +}
    +else {
    +    let nombreAlmacenado = localStorage.getItem('nombre');
    +    miTitulo.textContent = 'Mozilla es genial,' + nombreAlmacenado;
    +}
    + La primera línea de este bloque usa el operador de negación (NO lógico representado por !) para comprobar si el elemento 'nombre' existe. Si no existe, la función estableceNombreUsuario() se iniciará para crearlo. Si ya existe (como por ejemplo cuando el usuario ya ingresó al sitio), se recupera el dato del nombre usando getItem() y se fija mediante textContent del título a la cadena, más el nombre del usuario, como hiciste dentro de estableceNombreUsuario().
  8. +
  9. Finalmente, agrega abajo el evento onclick que manipulará el botón, de modo que cuando sea pulsado se inicie la función estableceNombreUsuario(). Esto permitirá al usuario establecer un nuevo nombre cada vez que lo desee al pulsar el botón: +
    miBoton.onclick = function() {
    +    estableceNombreUsuario();
    +}
    +
  10. +
+ +

Ahora cuando visites tu sitio por primera vez, este te pedirá tu nombre y te dará un mensaje personalizado de bienvenida. Puedes cambiar cuantas veces quieras el nombre al presionar el botón. Y como un bonus añadido, ya que el nombre se almacena en el localStorage, este permanecerá después de que cierre el sitio, ¡manteniendo ahí el mensaje personalizado cuando abras el sitio la próxima vez!

+ +

¿Un nombre de usuario nulo?

+ +

Cuando ejecutes el ejemplo y obtengas el cuadro de diálogo que solicita que introduzcas tu nombre de usuario, intenta pulsar el botón Cancelar. Deberías terminar con un título que diga que Mozilla es genial, null. Esto sucede porque, cuando cancelas el mensaje, el valor se establece como null. Null (nulo) es un valor especial en JavaScript que se refiere a la ausencia de un valor.

+ +

Además, prueba a dar clic en Aceptar sin introducir un nombre. Deberías terminar con un título que diga que Mozilla es genial, por razones bastante obvias.

+ +

Para evitar estos problemas, podrías comprobar que el usuario no ha introducido un nombre en blanco. Actualiza tu función estableceNombreUsuario() a lo siguiente:

+ +
function estableceNombreUsuario() {
+  let miNombre = prompt('Introduzca su nombre.');
+  if(!miNombre) {
+    estableceNombreUsuario();
+  } else {
+    localStorage.setItem('nombre', miNombre);
+    miTitulo.innerHTML = 'Mozilla is genial, ' + miNombre;
+  }
+}
+ +

En el lenguaje humano, esto significa que si miNombre no tiene ningún valor, ejecute estableceNombreUsuario() de nuevo desde el principio. Si tiene un valor (si la afirmación anterior no es verdadera), entonces almacene el valor en localStorage y establézcalo como el texto del título.

+ +

Conclusión

+ +

Si has seguido las instrucciones en este artículo, tendrás una página que luzca como esta (también puede ver nuestra versión aquí):

+ +

+ +

Si tuviste problemas, siempre puedes comparar su trabajo con el código terminado del ejemplo en GitHub.

+ +

Aquí solo has rozado la superficie de JavaScript. Si has disfrutado aprendiendo y deseas avanzar más, visita la Guía de JavaScript.

+ +

Ve también

+ +
+
JavaScript
+
Sumérgete en JavaScript con mucho más detalle.
+
Aprende JavaScript
+
¡Este es un excelente material para los aspirantes a desarrolladores web! Aprende JavaScript en un entorno interactivo, con lecciones cortas y pruebas interactivas, guiadas por una evaluación automatizada. Las primeras 40 lecciones son gratis. El curso completo está disponible por un pequeño pago único (en inglés).
+
+ +

{{PreviousMenuNext( "Learn/Getting_started_with_the_web/CSS_basics","Learn/Getting_started_with_the_web/Publishing_your_website","Learn/Getting_started_with_the_web")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/getting_started_with_the_web/la_web_y_los_estandares_web/index.html b/files/es/learn/getting_started_with_the_web/la_web_y_los_estandares_web/index.html new file mode 100644 index 0000000000..daf6e77d18 --- /dev/null +++ b/files/es/learn/getting_started_with_the_web/la_web_y_los_estandares_web/index.html @@ -0,0 +1,172 @@ +--- +title: La web y los estándares web +slug: Learn/Getting_started_with_the_web/La_web_y_los_estandares_web +tags: + - Estándares web + - Front-end + - Interfáz de Usuario + - Novato + - Principiante + - Web + - aprende +translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards +--- +

{{learnsidebar}}

+ +

Este artículo proporciona algunos antecedentes útiles sobre la Web — cómo surgió, qué son las tecnologías web estándar, cómo funcionan juntas, por qué "desarrollador web" es una gran carrera para elegir y qué tipos de mejores prácticas aprenderás a través de este curso.

+ +

Breve historia de la web

+ +

Mantendremos esto muy breve, ya que hay muchos artículos (más) detallados de la historia de la web, a los que enlazaremos más adelante (también intenta buscar "historia de la web" en tu motor de búsqueda favorito y ve lo que obtienes, si estás interesado en más detalles).

+ +

A fines de la década de 1960, las fuerzas armadas de EE. UU. desarrollaron una red de comunicación llamada {{Glossary("Arpanet")}}. Esta se puede considerar una precursora de la Web, ya que trabajó en la {{interwiki("wikipedia", "conmutación de paquetes")}} y presentó la primera implementación de la {{interwiki("wikipedia", "Familia de protocolos de internet")}} TCP/IP. Estas dos tecnologías forman la base de la infraestructura sobre la que se construye Internet.

+ +

En 1980, Tim Berners-Lee (a menudo denominado TimBL) escribió un programa de block de notas llamado ENQUIRE, que presentaba el concepto de enlaces entre diferentes nodos. ¿Te suena familiar?

+ +

Avanzó rápidamente hasta 1989, y TimBL escribió Gestión de la información: una propuesta e hipertexto en el CERN; estas dos publicaciones juntas proporcionaron los antecedentes de cómo funcionaría la web. Recibieron una buena cantidad de interés, suficiente para convencer a los jefes de TimBL de que le permitieran seguir adelante y creara un sistema de hipertexto global.

+ +

A finales de 1990, TimBL había creado todo lo necesario para ejecutar la primera versión de la web: {{web.link("/es/docs/Web/HTTP", "HTTP")}}, {{web.link("/es/docs/Web/HTML", "HTML")}}, el primer navegador web, que se llamaba {{interwiki("wikipedia", "WorldWideWeb")}}, un servidor HTTP y algunas páginas web para mirar.

+ +

En los años siguientes, la web explotó, se lanzaron varios navegadores, se instalaron miles de servidores web y se crearon millones de páginas web. Bien, este es un muy sencillo resumen de lo que sucedió, pero les prometí un breve resumen.

+ +

Un último dato importante para compartir es que en 1994, TimBL fundó el {{interwiki("wikipedia", "World Wide Web Consortium")}} (W3C), una organización que reúne a representantes de muchas empresas de tecnología diferentes para trabajar juntos en la creación de especificaciones de tecnología web. Después de eso, siguieron otras tecnologías como {{web.link("/es/docs/Web/CSS", "CSS")}} y {{web.link("/es/docs/Web/JavaScript", "JavaScript")}}, y la web comenzó a parecerse más a la web que conocemos hoy.

+ +

Estándares web

+ +

Los estándares web son las tecnologías que utilizamos para crear sitios web. Estos estándares existen como extensos documentos técnicos llamados especificaciones, que detallan exactamente cómo debería funcionar la tecnología. Estos documentos no son muy útiles para aprender a usar las tecnologías que describen (es por eso que tenemos sitios como MDN Web Docs), sino que están pensados ​​para que los utilicen los ingenieros de software para implementar esas tecnologías (generalmente en los navegadores web).

+ +

Por ejemplo, el lleno de vida Estándar HTML describe exactamente cómo se debe implementar HTML (todos los elementos HTML y sus APIs asociadas y otras tecnologías circundantes).

+ +

Los estándares web son creados por organismos de estándares — instituciones que invitan a grupos de personas de diferentes compañías de tecnología a unirse y acordar cómo deberían funcionar las tecnologías de la mejor manera posible para cumplir con todos sus casos de uso. El W3C es el organismo de estándares web más conocido, pero hay otros como WHATWG (que fueron responsables de la modernización del lenguaje HTML), ECMA (que publica el estándar para ECMAScript, en el que se basa JavaScript), Khronos (que publica tecnologías para gráficos 3D, como WebGL) y otras.

+ +

Estándares "abiertos"

+ +

Uno de los aspectos clave de los estándares web, que TimBL y el W3C acordaron desde el principio, es que la web (y las tecnologías web) deben ser libres tanto para contribuir como para usar, y no estar gravadas por patentes/licencias. Por lo tanto, cualquiera puede escribir el código para crear un sitio web de forma gratuita y cualquiera puede contribuir al proceso de creación de estándares, donde se escriben las especificaciones.

+ +

Debido a que las tecnologías web se crean abiertamente, en colaboración entre muchas empresas diferentes, significa que ninguna empresa las puede controlar, lo cual es algo realmente bueno. No querrías que una sola empresa decidiera repentinamente poner toda la web detrás de un muro de pago, o lanzar una nueva versión de HTML que todos tienen que comprar para continuar creando sitios web, o peor aún, simplemente decidiendo que ya no están interesados, y simplemente apagarlas.

+ +

Esto permite que la web siga siendo un recurso público de libre acceso.

+ +

No rompas la web

+ +

Otra frase que escucharás sobre los estándares web abiertos es "no rompas la web" — la idea es que cualquier tecnología web nueva que se introduzca debe ser compatible con versiones anteriores (es decir, los sitios web antiguos seguirán funcionando) y compatibles con versiones posteriores (las tecnologías futuras a su vez serán compatibles con las que tenemos actualmente). A medida que avances en el material de aprendizaje que se presenta aquí, comenzarás a aprender cómo se hace posible esto con un trabajo de diseño e implementación muy inteligente.

+ +

Ser desarrollador web es bueno

+ +

La industria web es un mercado muy atractivo para ingresar si estás buscando trabajo. Las cifras publicadas recientemente dicen que actualmente hay alrededor de 19 millones de desarrolladores web en el mundo, y esa cifra se establecerá en más del doble en la próxima década. Y al mismo tiempo, hay una escasez de habilidades en la industria, entonces, ¿qué mejor momento para aprender sobre desarrollo web?

+ +

Sin embargo, no todo es diversión y juegos — crear sitios web es una propuesta más complicada de lo que solía ser, y tendrás que dedicar algo de tiempo a estudiar todas las diferentes tecnologías que necesitas usar, todas las técnicas y las mejores prácticas que necesitas conocer y todos los patrones típicos que se te pedirá que implementes. Te tomará unos meses comenzar realmente a involucrarte en él, y luego deberás seguir aprendiendo para que tu conocimiento se mantenga actualizado con todas las nuevas herramientas y funciones que aparecen en la plataforma web, y seguir practicando y perfeccionando tu oficio.

+ +

Lo único constante es el cambio.

+ +

¿Esto suena difícil? No te preocupes: nuestro objetivo es brindarte todo lo que necesitas saber para comenzar, y las cosas serán más fáciles. Una vez que aceptes el cambio constante y la incertidumbre de la web, comenzarás a disfrutar. Como parte de la comunidad web, tendrás toda una red de contactos y material útil para ayudarte, y comenzarás a disfrutar de las posibilidades creativas que brinda.

+ +

Ahora eres un creativo digital. Disfruta de la experiencia y el potencial de ganarte la vida.

+ +

Descripción de las tecnologías web modernas

+ +

Hay una serie de tecnologías que debes aprender si deseas ser un desarrollador web front-end. En esta sección las describiremos brevemente. Para obtener una explicación más detallada de cómo funcionan juntas algunas de ellas, lee nuestro artículo {{web.link("/es/docs/Learn/Getting_started_with_the_web/How_the_Web_works", "Cómo funciona la web")}}.

+ + + +

Probablemente estés leyendo estas palabras dentro de un navegador web en este mismo momento (a menos que las hayas impreso o estés utilizando tecnología de asistencia, como un lector de pantalla para leerlas). Los navegadores web son los programas de software que la gente usa para consumir la web e incluyen Firefox, Chrome, Opera, Safari y Edge.

+ +

HTTP

+ +

El Protocolo de transferencia de hipertexto, o {{web.link("/es/docs/Web/HTTP/Basics_of_HTTP", "HTTP")}}, es un protocolo de mensajería que permite a los navegadores web comunicarse con los servidores web (donde se almacenan los sitios web). Una conversación típica es algo así como

+ +
"Hola servidor web. ¿Me puedes dar los archivos que necesito para renderizar bbc.co.uk"?
+
+"Seguro navegador web — aquí los tienes"
+
+[Descarga archivos y renderiza la página web]
+ +

La sintaxis real de los mensajes HTTP (llamados peticiones y respuestas) no es tan legible para los humanos, pero esto te da una idea básica.

+ +

HTML, CSS y JavaScript

+ +

{{web.link("/es/docs/Web/HTML", "HTML")}}, {{web.link("/es/docs/Web/CSS", "CSS")}} y {{web.link("/es/docs/Web/JavaScript", "JavaScript")}} son las tres tecnologías principales que utilizarás para crear un sitio web:

+ + + +

Herramientas

+ +

Una vez que hayas aprendido las tecnologías "sin procesar" que se pueden usar para crear páginas web (como HTML, CSS y JavaScript), pronto comenzarás a encontrar varias herramientas que puedes usar para hacer tu trabajo más fácil y/o más eficiente. Algunos ejemplos incluyen:

+ + + +

Marcos de desarrollo y lenguajes de lado del servidor

+ +

HTML, CSS y JavaScript son lenguajes de la interfaz del usuario ("front-end" o del lado del cliente), lo cual significa que los ejecuta el navegador para producir la interfaz del sitio web que los usuarios pueden utilizar.

+ +

Hay otra clase de lenguajes llamados lenguajes de la interfaz de admiración ("back-end" o de lado del servidor), lo cual significa que se ejecutan en el servidor antes de que el resultado se envíe al navegador para que se muestre. Un uso típico de un lenguaje de lado del servidor es obtener algunos datos de una base de datos y generar algo de HTML para contener los datos, antes de enviar el HTML al navegador para mostrárselo al usuario.

+ +

Los lenguajes de lado del servidor de ejemplo incluyen ASP.NET, Python, PHP y NodeJS.

+ +

Mejores prácticas web

+ +

Hemos hablado brevemente sobre las tecnologías que utilizarás para crear sitios web. Ahora analicemos las mejores prácticas que debes emplear para asegurarte de que estás utilizando esas tecnologías de la mejor manera posible.

+ +

Al hacer desarrollo web, la principal causa de incertidumbre proviene del hecho de que no sabes qué combinación de tecnologías utilizará cada usuario para ver tu sitio web:

+ + + +

Debido a que no sabes exactamente qué usarán tus usuarios, debes diseñar a la defensiva — hacer que tu sitio web sea lo más flexible posible, de modo que todos los usuarios anteriores puedan hacer uso de él, incluso si no todos obtienen la misma experiencia. En resumen, estamos tratando de hacer que la web funcione para todos, tanto como sea posible.

+ +

Encontrarás los siguientes conceptos en algún momento de tus estudios.

+ + + +

Ve también

+ + diff --git a/files/es/learn/getting_started_with_the_web/manejando_los_archivos/index.html b/files/es/learn/getting_started_with_the_web/manejando_los_archivos/index.html new file mode 100644 index 0000000000..0c7f8c4121 --- /dev/null +++ b/files/es/learn/getting_started_with_the_web/manejando_los_archivos/index.html @@ -0,0 +1,120 @@ +--- +title: Manejo de archivos +slug: Learn/Getting_started_with_the_web/Manejando_los_archivos +tags: + - Archivos + - Guía + - HTML + - Novato + - Principiante + - Scripting + - Sitios Web + - 'l10n:priority' + - teorias +translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

Un sitio web consta de muchos archivos: texto del contenido, código, hojas de estilo, contenido multimedia, etc. Cuando estás creando un sitio web, necesitas ensamblar estos archivos en una estructura sensible en tu computadora local, asegurarte de que puedan comunicarse entre sí y hacer que todo su contenido se vea bien antes de que eventualmente {{web.link("/es/Learn/Getting_started_with_the_web/Publishing_your_website", "los cargues en un servidor")}}. El manejo de archivos analiza algunos problemas que debes tener en cuenta, para que puedas configurar una estructura de archivos adecuada para tu sitio web.

+
+ +

¿Dónde debería estar tu sitio web en tu computadora?

+ +

Cuando estés trabajando en un sitio web localmente en tu computadora, debes mantener todos los archivos relacionados en un solo directorio que refleje la estructura de archivos del sitio web publicado en el servidor. Este directorio se puede ubicar en cualquier lugar que desees, pero debes colocarlo en algún lugar donde lo puedas encontrar fácilmente, tal vez en tu escritorio, en tu directorio de inicio o en la raíz de tu disco duro.

+ +
    +
  1. Elige un lugar para almacenar los proyectos de tus sitios web. Dentro del lugar elegido, crea un nuevo directorio llamado proyectosweb (o algo similar). Aquí es donde vivirán todos los proyectos de tus sitios web.
  2. +
  3. Dentro de este primer directorio, crea otro directorio para almacenar tu primer sitio web. Llámalo pruebasitio (o algo más imaginativo).
  4. +
+ +

Una acotación sobre la envoltura y el espaciado

+ +

Notarás que a lo largo de este artículo, te pedimos que nombres los directorios y archivos completamente en minúsculas sin espacios. Esto es porque:

+ +
    +
  1. Muchas computadoras, particularmente los servidores web, distinguen entre mayúsculas y minúsculas. Entonces, por ejemplo, si colocas una imagen en tu sitio web en pruebasitio/MiImagen.jpg y luego, en un archivo diferente intentas invocar la imagen como pruebasitio/miimagen.jpg, puede que no funcione.
  2. +
  3. Los navegadores, servidores web y lenguajes de programación no manejan los espacios de manera consistente. Por ejemplo, si usas espacios en tu nombre de archivo, algunos sistemas pueden tratar el nombre de archivo como dos nombres de archivo. Algunos servidores reemplazarán las áreas en tus nombres de archivo con "%20" (el código de caracteres para espacios en URI), lo cual provocará que todos tus enlaces se rompan. Es mejor separar las palabras con guiones, en lugar de guiones bajos: mi-archivo.html vs. mi_archivo.html.
  4. +
+ +

La respuesta corta es que debes usar un guión para los nombres de tus archivos. El motor de búsqueda de Google trata un guión como un separador de palabras, pero no considera un guión bajo de esa manera. Por estos motivos, es mejor adquirir el hábito de escribir los nombres de los directorios y archivos en minúsculas, sin espacios y con palabras separadas por guiones, al menos hasta que sepas lo que estás haciendo. De esa manera, tropezarás con menos problemas en el futuro.

+ +

¿Qué estructura debe tener tu sitio web?

+ +

A continuación, veamos qué estructura debería tener tu sitio de prueba. Las cosas más comunes que tendrás en cualquier proyecto de sitio web que crees son un archivo de índice HTML y directorios para contener imágenes, archivos de estilo y archivos de script. Crea estos ahora:

+ +
    +
  1. index.html: Este archivo generalmente tendrá el contenido de tu página de inicio, es decir, el texto y las imágenes que las personas ven cuando visitan tu sitio por primera vez. Usando tu editor de texto, crea un nuevo archivo llamado index.html y guárdalo dentro de tu directorio pruebasitio.
  2. +
  3. Directorio images: Este directorio contendrá todas las imágenes que utilices en tu sitio. Crea un directorio llamado images, dentro de tu directorio pruebasitio.
  4. +
  5. Directorio styles: Este directorio contendrá el código CSS que se utiliza para aplicar estilo al contenido (por ejemplo, configurar el texto y los colores de fondo). Crea un directorio llamado styles, dentro de tu directorio pruebasitio.
  6. +
  7. Directorio scripts: Este directorio contendrá todo el código JavaScript utilizado para agregar funcionalidad interactiva a tu sitio (por ejemplo, botones que cargan datos cuando se hace clic en ellos). Crea un directorio llamado scripts, dentro de tu directorio pruebasitio.
  8. +
+ +
+

Nota: En las computadoras con Windows, es posible que tengas problemas para ver los nombres de los archivos, porque de manera predeterminada, Windows tiene activada una opción llamada Ocultar extensiones para tipos de archivos conocidos. Generalmente, la puedes desactivar yendo al Explorador de Windows, seleccionando la opción Opciones de directorio..., desmarcando la casilla de verificación Ocultar extensiones para tipos de archivo conocidos y luego haciendo clic en Aceptar. Para obtener información más específica sobre tu versión de Windows, puedes buscar en la web.

+
+ +

Rutas de archivo

+ +

Para que los archivos se comuniquen entre sí, debes proporcionar una ruta de archivo entre ellos, básicamente una ruta, para que un archivo sepa dónde está otro. Para demostrarlo, insertaremos un poco de HTML en nuestro archivo index.html y haremos que muestre la imagen que elegiste en el artículo {{web.link("/es/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#Imágenes", "¿Cómo se verá tu sitio web?")}}

+ +
    +
  1. Copia la imagen que elegiste anteriormente en tu directorio images.
  2. +
  3. Abre tu archivo index.html e inserta el siguiente código en el archivo exactamente como se muestra. Por ahora, no te preocupes por lo que significa todo esto; veremos las estructuras con más detalle más adelante en la serie. +
    <!DOCTYPE html>
    +<html>
    +  <head>
    +    <meta charset="utf-8">
    +    <title>Mi página de prueba</title>
    +  </head>
    +  <body>
    +    <img src="" alt="Mi imagen de prueba">
    +  </body>
    +</html>
    +
  4. +
  5. La línea <img src="" alt="Mi imagen de prueba"> es el código HTML que inserta una imagen en la página. Necesitamos decirle al HTML dónde está la imagen. La imagen está dentro del directorio images, que está en el mismo directorio que index.html. Para recorrer la estructura del archivo desde index.html hasta nuestra imagen, la ruta del archivo que necesitamos es images/nombre-archivo-imagen. Por ejemplo, nuestra imagen se llama firefox-icon.png, por lo que la ruta del archivo es images/firefox-icon.png.
  6. +
  7. Inserta la ruta del archivo en tu código HTML entre las comillas dobles del código src="".
  8. +
  9. Guarda tu archivo HTML, luego cárgalo en tu navegador web (haz doble clic en el archivo). ¡Deberías ver tu nueva página web mostrando tu imagen!
  10. +
+ +

Una captura de pantalla del sitio web básico que muestra solo el logotipo de Firefox: un zorro en llamas envolviendo el mundo

+ +

Algunas reglas generales para las rutas de archivo:

+ + + +

Por ahora, esto es todo lo que necesitas saber.

+ +
+

Nota: El sistema de archivos de Windows tiende a utilizar barras invertidas, no barras diagonales, p. ej. C:\windows. Esto no importa en HTML, incluso si estás desarrollando tu sitio web en Windows, debes usar barras diagonales en tu código.

+
+ +

¿Qué más se debería hacer?

+ +

Eso es todo por ahora. La estructura de tu directorio debería verse así:

+ +

Una estructura de archivos en mac os x finder, que muestra un directorio de imágenes con una imagen, directorios de estilos y scripts vacíos, y un archivo index.html

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}

+ + + +

En este módulo

+ + diff --git a/files/es/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/es/learn/getting_started_with_the_web/publishing_your_website/index.html new file mode 100644 index 0000000000..9dbfe88d7e --- /dev/null +++ b/files/es/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -0,0 +1,195 @@ +--- +title: Publicar tu sitio web +slug: Learn/Getting_started_with_the_web/Publishing_your_website +tags: + - Aprender + - Aprendiz + - Dropbox + - FTP + - GitHub + - Publicacion + - Sitio Web + - Web + - Web Hosting + - publicar + - web server +translation_of: Learn/Getting_started_with_the_web/Publishing_your_website +--- +

{{LearnSidebar()}}

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works","Learn/Getting_started_with_the_web")}}

+ +
+

Una vez que termines de escribir tu código y organizar los archivos que forman parte de tu sitio, debes ponerlo en línea para que la gente pueda consultarlo. Este artículo muestra cómo conseguir de manera sencilla que tu código esté en línea.

+
+ +

¿Cuáles son las opciones?

+ +

Publicar un sitio no es un tema sencillo, principalmente porque hay muchas maneras diferentes de hacerlo. En este artículo no se trata de ver todos los modos posibles. En su lugar, discutiremos los pros y contras de tres amplias estrategias desde el punto de vista de un principiante, y luego debes seleccionar qué método usarás.

+ +

Obtener alojamiento y un nombre de dominio

+ +

Si deseas un control total sobre tu sitio web publicado, probablemente necesitarás gastar dinero para comprar:

+ + + +

Muchos sitios web profesionales toman esta opción.

+ +

Además, necesitarás un programa de protocolo de transferencia de archivo (File Transfer Protocol, FTP) para transferir los archivos que conforman tu sitio web al servidor (mira más detalles de cuánto puede costar: software). Los programas FTP varían ampliamente, pero en general tienes que conectarte a tu servidor web contratado mediante detalles proporcionados por tu empresa de alojamiento (por ejemplo: nombre de usuario, contraseña, nombre del host). Una vez conectado con el servidor web el programa te mostrará tus archivos locales y los archivos del servidor web en dos ventanas y te proporcionará una forma de transferir los archivos de un lado a otro.

+ +

+ +

Consejos para elegir alojamienoto y dominio

+ + + +

Utilizar una herramienta en línea como GitHub o Dropbox

+ +

Algunas herramientas te permiten publicar tu sitio en línea:

+ + + +

A diferencia de la mayoría de alojamientos (servicios de hosting), tales herramientas son por lo general libres de utilizar, pero solo permiten un conjunto de funciones limitadas.

+ +

Utilizar un entorno basado en web como CodePen

+ +

Existe un número de aplicaciones web que emulan un entorno de desarrollo de sitios web, permitiendo que ingreses tu código HTML, CSS y Javascript y luego muestran los resultados de dicho código como un sitio web, ¡todo en una pestaña del navegador! En términos generales, estas herramientas son bastante sencillas, geniales para aprender, buenas para compartir código (por ejemplo, si quieres compartir con alguien una técnica o pedir ayuda en la depuración del código) y gratuitas para las funciones básicas. Además, mantienen tu página renderizada en una única dirección web. Sin embargo, las características básicas son muy limitadas y estas aplicaciones usualmente no proveen espacio de almacenamiento para recursos (como imágenes).

+ +

Prueba con algunos de estos ejemplos y observa cuál es el que mejor se adapta a tu gusto:

+ + + +

+ +

Publicar a través de GitHub

+ +

Explicados estos tres métodos veamos ahora cómo publicar fácilmente, de forma muy visual e intuitiva, o bien por medio de comandos, tu sitio a través de GitHub Pages (en inglés).

+ +

De manera visual y sin necesidad de más herramientas

+ +

Esta no es la única manera, pero sí la que te permite poner manos a la obra inmediatamente.

+ +
    +
  1. Si aún no lo has hecho da de alta una cuenta en GitHub. Es simple y sencillo, solo debes verificar tu dirección de correo electrónico.
  2. +
  3. Una vez registrado, ingresa a tu cuenta en GitHub.com con tu usuario y contraseña suministrados al crear tu cuenta.
  4. +
  5. A continuación, necesitas crear un nuevo repositorio para tus archivos. Haz clic en el signo más (+) en la parte superior derecha de la página inicial de GitHub y selecciona New Repository (Nuevo repositorio).
  6. +
  7. En esta página, en la casilla Repository name (Nombre del repositorio), ingresa usuario.github.io, donde usuario es tu nombre de usuario. Así por ejemplo, nuestro amigo Bob Smith ingresaría bobsmith.github.io.
  8. +
  9. Opcionalmente escribe una corta descripción de tu sitio web en el campo Description para que recuerdes cuál es la temática que tratarás en él y selecciona la casilla de verificación Public (Público) si quieres que cualquier persona pueda ver los resultados de las ediciones que haces al sitio web que estás creando.
  10. +
  11. Marca la casilla de verificación Initialize this repository with a README (Inicializar este repositorio con un README (LÉAME)). Esto te permitirá clonar inmediatamente el repositorio a tu equipo. ¡Si vas a transferir tus archivos desde tu equipo al servidor de GitHub a través de un cliente de FTP (como se explica en la sección Subir tus archivos a GitHub a través de la línea de comandos, a continuación), no debes realizar este paso!
  12. +
  13. Da clic en Create repository (Crear repositorio).
  14. +
  15. Arrastra y suelta el contenido de la carpeta de tu sitio web en tu repositorio. Cuando termines de pasar el contenido haz clic en Commit changes (Confirmar cambios). +
    +

    Nota: cerciórate que tu carpeta tiene un archivo de nombre index.html

    +
    +
  16. +
  17. En tu navegador desplázate a username.github.io para ver tu sitio web en línea. Por ejemplo, para el nombre de usuario Bob Smith, escribe bobsmith.github.io. + + +
    +

    Nota: puede que tu página web tarde unos minutos en entrar en funcionamiento. Si tu sitio web no se muestra inmediatamente, espera unos minutos e inténtalo de nuevo.

    +
    +
  18. +
+ +

Subir tus archivos a GitHub a través de la línea de comandos

+ +

No estamos diciendo que esta es la única manera, o la mejor, de publicar tu sitio, pero es gratis, decentemente simple y abarca algunas nuevas habilidades que encontrarás útiles en adelante.

+ +

Antes que nada, descarga e instala Git en tu equipo. Este paso es necesario si vas a trabajar con los archivos de tu página web en él y luego los transferirás al servidor de GitHub.

+ +

Sigue los pasos 1 a 5 y el 7 (recuerda omitir el 6) detallados en la anterior sección De manera visual y sin necesidad de más herramientas. Una vez hayas dado clic en Create repository (Crear repositorio) verás la siguiente ventana (¡no la cierres, más adelante necesitarás copiar información de allí!):

+ +

+ +

En este punto ya estarás listo para poder utilizar la línea de comandos para subir los archivos de tu repositorio a GitHub. Una línea de órdenes o de comandos es una ventana donde escribes comandos que realizarán tareas como crear archivos y ejecutar programas, en lugar de utiizar la interfaz gráfica de usuario. Se debe parecer a algo como esto:

+ +

+ +
+

Nota: si no te sientes cómodo utilizando la línea de comandos, podrías considerar usar Git graphical user interface para realizar la misma tarea.

+
+ +

Todos los sistemas operativos vienen con una herramienta de línea de comandos:

+ + + +

Aunque este procedimiento pueda parecer un poco aterrador al principio no te preocupes, pronto te darás cuenta de lo básico. Darás órdenes al equipo en el terminal escribiendo un comando y presionando Intro.

+ +
    +
  1. Apunta la línea de comandos a tu directorio sitio-prueba (o como quiera que hayas llamado al directorio que contiene tu sitio web). Para esto utiliza el comando cd (es decir, «change directory», «cambiar de directorio»). Aquí viene lo que deberías teclear si has ubicado tu sitio web en un directorio llamado sitio-prueba en tu escritorio: + +
    cd Desktop/sitio-prueba
    + +

    En Windows sería:

    + +
    cd %USERPROFILE%\Desktop\sitio-prueba
    +
  2. +
  3. Cuando la línea de comandos esté apuntando dentro del directorio de tu sitio web, teclea el siguiente comando, que indica a la herramienta de git que transforme el directorio en un repositorio de Git: +
    git init
    +
  4. +
  5. +

    A continuación, regresa a la ventana del sitio de GitHub que dejaste abierta. En esa página, la sección que interesa es …or push an existing repository from the command line. Deberías ver dos líneas de código listadas en esa sección. Copia toda la primera línea, pégala en la línea de comandos y presiona Intro. El comando debería verse similar a:

    + +
    git remote add origin https://github.com/bobsmith/bobsmith.github.io.gi
    +
  6. +
  7. A continuación, ingresa los siguientes dos comandos, presionando Intro después de cada uno. Estos preparan el código para cargar a GitHub y pedir a Git administrar estos archivos. +
    git add --all Intro
    +git commit -m 'agregando archivos a mi repositorio' Intro
    +
  8. +
  9. Finalmente, envía el codigo a GitHub tomando de la página web de GitHub en la que estás el segundo de los dos comandos del paso 3 e introdúcelo en el terminal: +
    git push -u origin master
    +
  10. +
  11. Ahora cuando vayas a la direccion de red de tu página GitHub (usuario.github.io) en una nueva pestaña del navegador ¡deberías ver tu sitio en línea! Envíala por correo-e a tus amigos y presume de tu maestría.
  12. +
+ +
+

Nota: has tocado apenas la superficie de Git. Si te quedas atascado la ayuda de GitHub en español te será de gran apoyo.

+
+ +

Conocer más de GitHub

+ +

Si deseas hacer más cambios a tu sitio y enviarlos a GitHub, luego de modificar los archivos, debes ingresar los siguientes comandos (presionando Intro después de cada uno) para enviar esos cambios a GitHub:

+ +
git add --all Intro
+git commit -m 'otro commit' Intro
+git push Intro
+ +

Puedes reemplazar el texto otro commit con un mensaje más descriptivo respecto a los cambios que hiciste.

+ +

Conclusión

+ +

En este punto, deberías tener tu página web de ejemplo disponible en una dirección web única. ¡Bien hecho!

+ +

+ +

Ver también

+ + + +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works","Learn/Getting_started_with_the_web")}}

diff --git a/files/es/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/es/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html new file mode 100644 index 0000000000..fb6ced116f --- /dev/null +++ b/files/es/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -0,0 +1,113 @@ +--- +title: ¿Cuál será la apariencia de tu sitio Web? +slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like +tags: + - Activos + - Aprender + - Composición + - Contenido + - Desaprobado + - Diseño + - Fuentes + - Imagenes + - Novato + - Planificar + - Principiante + - Tipos de Letra + - paso a paso +translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
+ +
+

¿Cómo se verá tu sitio web?, analiza el trabajo de planificación y diseño que debes realizar para tu sitio web antes de escribir el código, incluyendo: "¿qué información ofrece mi sitio web?", "¿qué tipos de letra y colores quiero?" y "¿qué hace mi sitio?".

+
+ +

Lo primero es lo primero: planificación

+ +

Antes de hacer nada, necesitas algunas ideas. ¿Qué debería hacer realmente tu sitio web?; Un sitio web puede hacer básicamente cualquier cosa, pero, en tu primer intento, debes mantener las cosas simples. Comenzarás creando una página web simple con un encabezado, una imagen y algunos párrafos.

+ +

Para comenzar, deberás responder estas preguntas:

+ +
    +
  1. ¿De qué trata tu sitio web?, ¿te gustan los perros, Nueva York o Pac-Man?
  2. +
  3. ¿Qué información presentas sobre el tema?; Escribe un título y algunos párrafos y piensa en una imagen que te gustaría mostrar en tu página.
  4. +
  5. ¿Cómo se ve tu sitio web, en términos simples de alto nivel?, ¿cuál es el color de fondo?, ¿qué tipo de letra es apropiado: formal, caricaturesca, atrevida y fuerte, sutil?
  6. +
+ +
+

Nota: Los proyectos complejos necesitan pautas detalladas que incluyan todos los detalles de los colores, los tipos de letra, el espacio entre los elementos de una página, el estilo de escritura adecuado, etc. Esto, a veces, se denomina guía de diseño, sistema de diseño o libro de marcas, y puedes ver un ejemplo en el Sistema de diseño de fotones de Firefox.

+
+ +

Haz un bosquejo de tu diseño

+ +

A continuación, toma papel y lápiz y dibuja aproximadamente cómo deseas que se vea tu sitio. Para tu primera página web simple, no hay mucho que esbozar, pero deberías adquirir el hábito de hacerlo ahora. Realmente ayuda, ¡no tienes que ser Van Gogh!

+ +

Bosquejo

+ +
+

Nota: Incluso en sitios web reales y complejos, los equipos de diseño suelen comenzar con bocetos en papel y luego crean maquetas digitales utilizando un editor de gráficos o tecnologías web.

+ +

Los equipos web suelen incluir tanto un diseñador gráfico como un diseñador de {{Glossary("UX", "experiencia de usuario")}} (UX). Los diseñadores gráficos ensamblan las imágenes del sitio web. Los diseñadores de experiencia de usuario tienen un papel algo más abstracto al abordar cómo los usuarios experimentarán e interactuarán con el sitio web.

+
+ +

Elige tus activos

+ +

En este punto, es bueno comenzar a reunir el contenido que eventualmente aparecerá en tu página web.

+ +

Texto

+ +

Aún debes tener los párrafos y el título de antes. Mantenlos cerca.

+ +

Color del tema

+ +

Para elegir un color, ve al Selector de color y busca un color que te guste . Al hacer clic en un color, verás un extraño código de seis caracteres como #660066. Eso se llama código hexadecimal (abreviatura de hexadecimal) y representa tu color. Copia el código en un lugar seguro por ahora.

+ +

Color del tema

+ +

Imágenes

+ +

Para elegir una imagen, ve a Imágenes Google y busca algo adecuado.

+ +
    +
  1. Cuando encuentres la imagen que deseas, haz clic en la imagen para obtener una vista ampliada de la misma.
  2. +
  3. Haz clic con el botón derecho en la imagen (Ctrl+clic en una Mac), elige Guardar imagen como... y elige un lugar seguro para guardar tu imagen. Alternativamente, copia la dirección web de la imagen de la barra de direcciones de tu navegador para su posterior uso.
  4. +
+ +

Imágenes

+ +

Ten en cuenta que la mayoría de las imágenes en la web, incluidas las de Imágenes Google, están protegidas por derechos de autor. Para reducir tu probabilidad de violar los derechos de autor, puedes utilizar el filtro de licencias de Google. Haz clic en el botón Herramientas y luego en la opción Derechos de uso resultante que aparece a continuación. Debes elegir una opción como Etiquetado para reutilización.

+ +

Etiquetado para reutilización

+ +

Tipos de letra

+ +

Para elegir un tipo de letra:

+ +
    +
  1. Ve a Google Fonts y desplázate hacia abajo en la lista hasta que encuentres una que te guste. También puedes utilizar los controles de la derecha para filtrar aún más los resultados.
  2. +
  3. Haz clic en el icono "más" (Agregar a) junto al tipo de letra que desees.
  4. +
  5. Haz clic en el botón "*Familia seleccionada" en el panel en la parte inferior de la página ("*" depende de cuántos tipos de letra hayas seleccionado).
  6. +
  7. En el cuadro emergente, puedes ver y copiar las líneas de código que Google te brinda en tu editor de texto para guardarlas para más adelante.
  8. +
+ +

Archivos de tipo de letra

+ +

Tipos de letra

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}

+ +

En este módulo

+ + -- cgit v1.2.3-54-g00ecf