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, poder colaborar y subir las páginas web. Github es la plataforma online que usa Git más usada, y también permite publicar páginas web.

Primero nos registramos en Github. Después instalamos git:

sudo apt install git

Y por último configuramos nuestro ordenador para que Github lo reconozca. Para eso, instalamos nuestra clave de SSH en Github siguiendo estos 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 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 crear y subir páginas estáticas. Estas sólo tienen html, css y javascript, lo cual suele bastar para las páginas más sencillas: un portfolio, una página informativa, etc.

Sin embargo, cuando queremos que el usuario pueda registrarse o modificar cosas necesitaremos hacer un back-end ejecutándose en un servidor. Para este curso usaremos Node.js, que es un servidor escrito en el lenguaje Javascript (por lo que nos resultará familiar). Hay muchos otros lenguajes para escribirlos, incluyendo PHP, Python, Ruby on Rails, etc.

In­stalar Node con Node Version Manager

NVM es la herramienta recomendada para instalar y manejar Node, así que lo instalaremos con este comando:

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

Después tendremos que cerrar y abrir la terminal para que nos funcione correctamente.

Usaremos NVM para instalar la versión más moderna de Node. Para ello, entramos en la web de Node.js y usamos los números de donde pone Current:

nvm install 6.3.1
nvm use 6.3.1

Comprobamos que está instalada la versión que toca haciendo esto, lo cual nos tiene que mostrar el mismo número:

node --version

Heroku

Github 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 proceso es similar a Git y Github.

Nos registramos en Heroku e instalamos el Heroku Toolbelt:

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

Hacemos Login a través de la terminal a Heroku:

heroku login

In­stalar MongoDB

MongoDB es la base de datos que usaremos. Si no consigues instalarlo, podrás seguir los pasos pero no podrás almacenar nada en la base de datos. Lo instalamos con:

sudo apt install mongodb

Y probamos que funciona haciendo:

mongod --version