History: Preparación

Revision made 8 years ago by Francisco Presencia. Go to the last revision.

En este capítulo instalarás her­ramien­tas que hacen falta para crear una página web y subirla a internet. Está explicado para Ubuntu, la distribución de Linux. Para Mac tiene que ser muy parecido, y para Windows buscad y seguid pasos similares.

Herramientas y configuración común

Estos son los que se suelen usar para crear páginas web, independientemente del tipo de página.

Crear pro­yec­to

Creamos una car­peta con el nombre de nuestro pro­yec­to donde pondremos todos los archivos. Para este curso usaremos el nombre Web para re­ferir­nos a la car­peta.

De­ntro de la car­peta crearemos tres archivos, index.html, style.css y javascript.js. HTML es un len­guaje de estruc­tura y con­tenido. En el va el con­tenido de la web en sí. A dif­eren­cia de este, CSS es un len­guaje de es­tilo. El mismo le da col­ores y for­mas al HTML. Por último, javascript es un lenguaje de interacción. La mayoría de cosas que cambian en una página web suceden con el mismo.

In­stalar Atom

In­stalamos un editor de código en con­diciones. A pesar de que se podría editar con el notepad, vamos a usar un editor moder­no llamado Atom:

https://atom.io/

Una vez esté instalado lo abrimos y añadimos la car­peta Web a Atom como pro­yec­to. Desde Atom, Archivo > Añadir pro­yec­to y elegimos la car­peta. Vemos que se añade a la iz­quier­da sin pro­blema.

Git y Git­hub

Git es una herramienta de terminal para manejar versiones de código y poder colaborar entre diferentes personas editando el mismo código a la vez. Sustituye al típico documento que acaba con los sufijos _final, final_definitivo, final_este_si, etc.

También se usa para subir código a internet, así que por ahora vamos a instalarlo:

sudo apt install git

Git­hub es una platafor­ma con muc­has func­ionalidades para los pro­gramadores:

  • La gente sube y com­par­te su código en re­positorios.
  • Sirve para col­aborar en pro­yec­tos tanto open sour­ce como privados.
  • Tiene un apar­tado para pub­licar páginas web que es el que nos in­teresa y veremos más adelante.

Utiliza principalmente Git para manejar estos repositorios, así que por ahora vamos a registrarnos y más adelante veremos cómo usar este último punto para subir nuestra web.

Ver la web

Una vez tenemos los archivos creados ya podemos ver la web (que estará en blan­co) si ab­rimos el archivo index.html desde el navegador. Para ello, desde la carpeta (fuera de Atom) click de­rec­ho en el archivo > abrir con > Firefox/Chrome. Pro­bad a escribir desde Atom un sen­cil­lo "Hello world" en index.html y re­petir los pasos.

Una vez vayamos modifican­do el archivo, en lugar de rea­brir­lo podemos re­fres­car la página web con F5 y se verán los cam­bios.

1. Hacer cam­bios en index.html o en style.css (ex­plicados más adelan­te).

2. Guar­dar di­chos cam­bios

3. Abrir el archivo con nuestro navegador o ap­retar F5 con la ven­tana ab­ier­ta

4. Pro­fit! GOTO 1.

Instalar el servidor

Lo que hemos hecho anteriormente nos sirve para