Introducción al desarrollo web

Introducción al desarrollo web

Mucho se habla de que Internet es el futuro.

Pero en realidad es el presente.

Hay páginas web de todo tipo y de todos los colores.

¿Quién las hace?

Pues los desarrolladores web.

Si tú quieres ser uno de los nuestros, basta con empezar por el principio.

¿Qué es una web?

Ya que vas a hacer páginas web, está bien empezar por saber qué es una web.

Fácil.

Una web es una página

Igual que la página de un libro, pero en vez de estar en un papel está en una pantalla.

Y puede tener elementos:

  • Fotos.
  • Vídeos.
  • Textos.
  • Colores.

Básicamente.

El navegador Web

Para ver una página web hace falta un navegador web.

Esto que estás usando para navegar y mirar por internet.

Probablemente sea Firefox, Google Chrome, Internet Explorer o Safari.

Ese navegador es un intérprete, que transforma el código de la web en lo que ves.

Así:

  • El desarrollador web desarrolla la web en código web: HTML.
  • El navegador web traduce (interpreta) el HTML para convertirlo en colores y formas en la pantalla.
  • El usuario final disfruta de la web.

Bien.

Tú, a partir de ahora, eres un desarrollador web.

Sabes lo que es un navegador web, y sabes que una página de internet no es solo lo que ves, sino lo que el navegador está interpretando a partir de un código de fondo, que se llama código HTML.

Dos cosas:

  • Si digo desarrollador y no desarrolladora no es porque odie a las mujeres, es porque me parece una gran tontería lingüística repetir las cosas y los cosos.
  • HTML viene del inglés Hyper-Text Markup Language. No es un lenguaje de programación, es un lenguaje de marcado. Un lenguaje de marcado es un lenguaje que se usa para marcar cosas. Para darles formato y forma. Por ejemplo, poner algo en negrita. Este lenguaje empezó siendo muy básico, de uso comunicativo entre militares. Y ha evolucionado, bastante.

¿Qué necesito para hacer un sitio web?

Pues necesitas poquita cosa.

Yo te recomiendo estos ingredientes:

  • Un ordenador: Que funcione.
  • Un navegador web: Firefox [Gratis].
  • Un editor HTML: Sublime Text [Gratis].

¿Para qué?

El ordenador es más o menos obvio que lo necesitas.

El editor HTML es un programa para escribir el código de forma cómoda. Yo he recomendado Sublime Text porque es de lo mejor que hay. Si conoces otro que te guste más, bravísimo.

Y el navegador lo necesitas para ver el resultado de lo que estás haciendo. Cuando tengas práctica, podrás hacer las webs sin tener que mirarlas, porque tu imaginación hará de navegador directamente.

¿Qué hago ahora?

Pues si ya tienes instalado el editor HTML, vamos a abrir el editor HTML.

Tendrás un área de escritura. Ahí vamos a escribir lo siguiente:

<html>
  <head>
    <title>Cocodrilolandia</title>
    <meta charset="utf-8">
  </head>
  <body>
  Mi primera web. Bienvenidos a Cocodrilolandia.
  </body>
</html>

Puedes copiar y pegar si quieres.

Ahora lo que nos interesa es que puedas entender cómo funciona todo esto.

Cuando hayas copiado y pegado en el programa, verás que aparece todo coloreado de forma muy agradable.

como-hacer-web-1

Pues eso es un editor de código, y para eso sirve: para trabajar con comodidad.

Visualizar el HTML en el navegador

Vamos a ver cómo se vería en internet lo que hemos hecho en el editor.

Para eso vamos a guardar el archivo en algún lugar del ordenador.

No importa dónde lo guardes.

Pero para hacerlo fácil, vamos a guardarlo en una carpeta en el Escritorio, que se llame “Cocodrilolandia”.

El nombre del archivo no importa, pero la extensión del archivo tiene que ser .html

¿La extensión?

La extensión es el formato, el tipo de archivo.

Todos los archivos de un ordenador tienen un formato, para que tu ordenador sepa abrirlos y entenderlos correctamente.

En nuestro caso lo guardamos por ejemplo como “web.html” para que el navegador, cuando lo vea, sepa lo que tiene que hacer.

Vamos a abrir el archivo en el navegador

Hay muchas formas de hacerlo.

  • Puedes arrastrar el archivo al simbolito del navegador.
  • Puedes abrir el menú contextual y hacer clic en “Abrir con…”.
  • Puedes seleccionar la opción Abrir archivo directamente desde el navegador.
  • Et cétera…

Ahora eres un desarrollador, y los desarrolladores tienen que averiguar las cosas. Porque depende de tu sistema operativo, de la versión, y del tiempo. Averígualo ;).

Y cuando lo abras con tu navegador, verás algo similar a esto:

como-hacer-web-2

Esa es tu primera página web.

¡Enhorabuena!

El navegador está interpretando el archivo que hemos escrito.

Así a simple vista parece una tontería.

Sin color, sin forma, sin nada.

Pero si has llegado hasta aquí, tienes que ir corriendo a encontrar el primer espejo.

Mírate a los ojos y aplaude, porque has aprendido todo esto:

  • Las webs son en realidad códigos HTML.
  • Los navegadores web interpretan los códigos HTML.
  • Las webs se desarrollan en un editor de código.
  • Desarrollar una web es en realidad escribir en el idioma HTML.

Ahora solo te queda aprender a fondo el idioma HTML y todos los trucos.

Pero para eso estamos aquí.

Siguiente capítulo: Aprender HTML