Introducción y preparación

In­stalaremos las her­ramien­tas que son necesarias para hacer, subir a in­ter­net y ad­ministrar páginas web. También lo de­jaremos todo listo para poner­nos a trabajar en los siguien­tes capítulos.

Está ex­plicado para Ubun­tu, la dis­tribución de Linux. Para Mac es muy parecido, y para Win­dows tendréis que descargaros el ejecutable desde la página oficial.

Her­ramien­tas y con­figuración común

Estos son los que se suel­en usar para crear páginas web, in­depen­dien­temen­te del tipo de página. Las usaremos para crear nuestra página sen­cil­la para los primeros capítulos.

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 len­guaje de in­terac­ción. La mayoría de cosas que cam­bian en una página web suc­ed­en 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é in­stalado lo ab­rimos 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 her­ramien­ta de ter­min­al para man­ejar ver­siones de código, poder col­aborar y subir las páginas web. Git­hub es la platafor­ma on­line que usa Git más usada, y también per­mite pub­licar páginas web.

Primero nos re­gistramos en Git­hub. Después in­stalamos git:

sudo apt install git

Y por último con­figuramos nuestro or­denador para que Git­hub lo re­conoz­ca. Para eso, in­stalamos nuestra clave de SSH en Git­hub siguien­do estos pasos. Aun­que haya varias for­mas de hacer­lo, a la larga esta es la más cómoda.

Si tenemos Ubun­tu, com­probad que ya tenemos una clave de ssh con:

cd ~/.ssh     # acceder a nuestra carpeta de ssh
ls            # mostrar los archivos

Si vemos un archivo que se llama id_rsa.pub, co­piad los con­tenidos del mismo en el apar­tado de claves ssh en git­hub. Para mostrar la clave, haced:

cat id_rsa.pub

Una vez la hayamos con­figurado, con­tinuad con los siguien­tes pasos.

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 car­peta (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 ab­rir­lo desde el navegador.

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.

In­stalar el ser­vidor

Lo que hemos hecho an­terior­mente nos sirve para crear y subir páginas estáticas. Estas sólo tien­en html, css y javascript, lo cual suele bas­tar para las páginas más sen­cil­las: un portfolio, una página in­for­mativa, etc.

Sin em­bar­go, cuan­do queremos que el usuario pueda re­gistrar­se o modificar cosas necesitaremos hacer un back-end ejecután­dose en un ser­vidor. Para este curso usaremos Node.js, que es un ser­vidor escrito en el len­guaje Javascript (por lo que nos re­sul­tará familiar). Hay muc­hos otros len­guajes para escribir­los, in­cluyen­do PHP, Pyt­hon, Ruby on Rails, etc.

In­stalar Node con Node Vers­ion Man­ag­er

NVM es la her­ramien­ta re­comen­dada para in­stalar y man­ejar Node. Esta herramienta no está disponible para Windows. Si usas Windows recomendamos instalar el binario de Node.js directamente desde la web oficial y seguir con el siguiente paso. Para Linux/Mac lo in­stalaremos con este com­an­do:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash

Después tendremos que cer­rar y abrir la ter­min­al para que nos func­ione cor­rec­tamen­te.

Usaremos NVM para in­stalar la versión más moder­na de Node. Para ello, en­tramos en la web de Node.js y usamos los números de donde pone Cur­rent:

nvm install 7.9.0
nvm use 7.9.0

Com­probamos que está in­stalada la versión que toca hacien­do esto, lo cual nos tiene que mostrar el mismo número:

node --version

Heroku

Git­hub sólo sirve para subir páginas estáticas, así que usaremos Heroku en la versión gratuita para subir nuestra web dinámica. El pro­ceso es similar a Git y Git­hub.

Nos re­gistramos en Heroku e in­stalamos el Heroku Tool­belt:

wget -O- https://toolbelt.heroku.com/install-ubuntu.sh | sh

Hacemos Login a través de la ter­min­al a Heroku:

heroku login

In­stalar Mon­goDB

Mon­goDB es la base de datos que usaremos. Si no con­sigues in­stalar­lo, podrás seguir los pasos pero no podrás al­macenar nada en la base de datos. Lo in­stalamos con:

sudo apt install mongodb

Y pro­bamos que func­iona hacien­do:

mongod --version

Instalar nodemon globalmente para facilitar la vida:

npm install nodemon -g