History: Preparación

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

Para pro­gramar una página web hacen falta varias her­ramien­tas y len­guajes de pro­gramación. Aqui os hacemos un breve re­sum­en del pro­ceso, de forma or­denada, para hacer páginas web.

In­stalar Atom

Primero deberéis de in­stalar 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.

Atom

Crear pro­yec­to

Una vez ya tenemos el editor creado, 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 un par de archivos, index.html y style.css. 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, for­mas y algo de in­terac­ción al HTML.

Una vez estén creados, añadimos la car­peta 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.

Ver la web

Una vez tenemos los dos archivos creados, podemos ver la web (que estará en blanco) si abrimos el archivo index.html desde el navegador. Para ello, click derecho en el archivo > abrir con > Firefox/Chrome. Probad a escribir desde Atom un sencillo "Hello world" y repetir los pasos.

Una vez vayamos modificando el archivo, en lugar de reabrirlo podemos refrescar la página web con F5 y se verán los cambios.

1. Hacer cambios en index.html o en style.css (explicados más adelante).

2. Guardar dichos cambios

3. Abrir el archivo con nuestro navegador o apretar F5 con la ventana abierta

4. Profit! GOTO 1.

Git­hub

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.

En este caso no hemos podido ver cómo hacerlo, pero siguiendo la guía que hay ahí y aprendiendo lo básico de git/github podréis subirlo.