Crea tu propia página web desde cero (I)

A continuación vamos a ver cómo crear una página web desde cero, es decir, sin utilizar ninguna herramienta predefinida, ni Wordpress ni nada por el estilo. Bastará con tener instalado un servidor local al principio, para poder probar en nuestra máquina antes de tener terminada la web, y un editor de textos para escribir el código. Paso a paso veremos cómo ir construyendo nuestra web, de manera que en cada momento sabremos lo que estamos haciendo y cómo funcionan los entresijos y el código que hay detrás, que con otras herramientas no sería posible.

Vamos a trabajar en Windows, con un servidor Apache, un motor de base de datos MySQL y PHP para la programación del lado del servidor. Si juntamos todas esas iniciales tenemos WAMP, que es precisamente la herramienta que nos vamos a instalar y que reúne todos estos servicios necesarios para construir nuestra web. 

1. Descargar WAMP. Así pues, lo primero que haremos será descargarnos el WAMP de su página oficial eligiendo la versión de 32 o 64 bits según nuestro sistema operativo. El equivalente para Linux sería el XAMP. En esa misma página se explica con un vídeo-tutorial cómo instalarlo. Es muy sencillo, como en casi cualquier instalador, hay que seguir los pasos.

2. Instalar WAMP. Cuando veamos la pantalla en la que nos pide introducir la ruta de instalación, es recomendable dejarlo como está, en c:\wamp. En esta ruta será donde se alojen las páginas webs que vayamos a crear más adelante. Si vemos alguna pantalla que nos pida algún dato más, simplemente le damos a siguiente todo el rato, dejando las cosas por defecto.

Una vez instalado, confirmamos que queremos lanzar WAMP Server en nuestra máquina. Comprobamos que las versiones de cada tecnología es la correcta (al menos que sean las versiones que aparecen en la siguiente captura).

3. Configurar WAMP. Idealmente todo arrancaría correctamente, mostrando un icono verde de WAMP en la barra de tareas de Windows. Pero muchas veces el icono es rojo, lo que significa que hay algún error de configuración de Apache o PHP generalmente. Si tu icono es verde, puedes saltarte las siguientes dos secciones y escribir directamente la dirección localhost en el navegador, y si ves la pantalla principal de WAMP (ver captura más adelante en la sección 4), es que todo funciona correctamente. Si no, puedes configurar Apache y PHP:

3.1 Apache: Es el servidor que hará que nuestra web se muestre en nuestro navegador. Inicialmente vamos a trabajar en nuestra máquina local, por lo que en el navegador la url que usaremos será localhost (o la IP privada que tengamos configurada en nuestra red local). 

Cuando la web esté acabada ya veremos cómo migrarla a un servidor remoto con un nombre de dominio tipo www.ejemplo.com. Pero para que Apache funcione, debe estar configurado. En principio, lo básico es su número de puerto y directorio raíz. Si hemos instalado WAMP en c:\wamp, el directorio raíz debería estar ya bien configurado y puesto en c:\wamp\www, y el puerto por defecto es el 80. Esto significa que por ejemplo el proyecto web Ejemplo estará ubicado físicamente en c:\wamp\www\Ejemplo, y para ver nuestra web accederíamos desde el navegador a localhost:80/Ejemplo, aunque al ser el puerto 80 el predeterminado para la navegación web, no haría falta poner el número de puerto, bastaría con localhost/Ejemplo. El problema viene si anteriormente ya teníamos reservado ese puerto 80 para otro servidor, como por ejemplo el IIS de Windows. En ese caso tendremos que decirle a Apache que utilice otro número, normalmente por tradición se suele usar el 8080 por similitud con el 80. 

Para configurar tanto el directorio raíz como el número de puerto, hay que hacer click en el icono de WAMP de nuestra barra de tareas de Windows. Hay una sección por cada servicio, y en Apache vemos un apartado que dice httpd.conf. Ese es el nombre del fichero de configuración de Apache, por lo que pinchamos en él y accedemos al fichero de texto con toda su configuración. Hay que andarse con cuidado de no trastear indebidamente, pues cualquier configuración errónea hará que no funcione el servidor, así que es aconsejable guardarse una copia del fichero original, que se encuentra en c:\wamp\bin\apache\apache2.4.2\conf\httpd.conf. Puedes encontrar mucha información y ayuda sobre cómo configurar este archivo, pero en principio basta con asegurarse de que el directorio raíz es el c:\wamp\www (suponiendo que instalamos ahí el WAMP), y que el puerto es el 80, o el que vayamos a utilizar. En la siguiente captura vemos en qué líneas se encuentran estas configuraciones:

La sección DocumentRoot nos indica entre comillas la ruta donde tenemos el directorio raíz, y para el número de puerto hay que buscar la línea Listen 80, donde 80 será el número de puerto que usemos. También podemos configurar más cosas, como la privacidad de cada uno de los directorios de nuestra web, para decidir si se puede entrar a ellos desde otras máquinas remotas, etc. pero no vamos a entrar en más detalles por ahora. Para más información, consultar en Google. Una vez hechos los cambios, guardamos ese fichero de texto y reiniciamos el servidor, haciendo click en el icono de WAMP y pulsando en Restart All Services.

3.2 PHP: también es necesario configurar PHP, y en ocasiones una mala configuración puede suponer un quebradero de cabeza, pero en principio debería bastar con configurar la variable de entorno Path. Esto le sirve a Windows para saber en cada momento en qué ruta está instalado PHP, para cuando lo tenga que utilizar. Para configurarlo, hay que hacer click derecho en Este equipo del escritorio (el clásico Mi PC) y pinchar en Propiedades. En la pestaña Opciones avanzadas, hacemos click en el botón Variables de entorno, y en la nueva ventana veremos la sección de variables del usuario y las variables del sistema, que es donde tenemos la variable Path. Hacemos doble click en este valor (o un click y después en Editar), y podremos escribir un valor para la ruta. Debería haber ya rutas de otras aplicaciones, por lo que no debemos borrar nada. Simplemente hay que añadir la nueva ruta, separada por punto y coma, como se muestra en la siguiente captura. En este ejemplo, PHP está instalado en C:\wamp\bin\php\php5.4.3, por lo que añadimos esa ruta tal cual al final del todo (asegúrate de cuál es tu ruta exacta dentro de la carpeta de WAMP, comprobando tu versión de PHP), siempre separado por un punto y coma del resto de rutas. Posteriormente se podrían añadir más rutas de otras aplicaciones.

Pero además de esta configuración para PHP, se pueden configurar más cosas, al igual que con Apache, desde un fichero de texto. En este caso se encuentra haciendo click en el icono de WAMP, y después en la sección PHP, el fichero php.ini. De nuevo, hay que tener cuidado al configurar este archivo, y se puede encontrar mucha información en internet, dependiendo de los errores que tengamos o lo que queramos configurar. Al finalizar de guardar los cambios de PHP, hay que reiniciar los servicios de WAMP para que los cambios en la configuración hagan efecto. 

4. ¿Todo correcto? Para ver por fin si todo funciona correctamente, lo primero es comprobar que el icono de WAMP de la barra de tareas es de color verde. Si es así, podemos abrir nuestro navegador y escribir la dirección localhost, o localhost:8080 o el número de puerto que tuviéramos configurado. Si todo es correcto, deberíamos ver la página de inicio de nuestro servidor:

En la sección phpinfo() podemos ver la información y versión de nuestro PHP. En phpmyadmin podremos acceder al sistema de gestión de bases de datos, que veremos próximamente para crear nuestra propia base de datos con MySQL para utilizar en nuestra web. Y en la sección Your projects podemos ver nuestros proyectos web, que inicialmente estarán vacíos.

5. Nuestra primera web. Ahora, por fin, vamos a crear nuestro primer proyecto web. Para ello basta con ir a nuestro directorio raíz c:\wamp\www, y aquí crear una nueva carpeta con el nombre que queramos dar a la web. En nuestro caso será Ejemplo. Y la primera página de la web será por defecto un archivo index.html, que es por donde suelen empezar las webs cuando un usuario entra. Así pues, en nuestra carpeta c:\wamp\www\Ejemplo creamos un archivo HTML llamado index.html, y lo editamos. Recomiendo un editor razonable que permita editar código con comodidad, y no el bloc de notas de Windows. Personalmente recomiendo Notepad++, aunque hay muchos más, pero siempre editores de texto sin formato, nada de procesadores de texto tipo Word o LibreOffice, etc. Si usamos Notepad++, podemos crear ahí un nuevo documento, escribir código y guardar como tipo HTML:

Ahora es donde entra en juego los conocimientos de HTML, que veremos en siguientes posts. Pero por ahora basta con que sepamos que una página web es un fichero con un código que interpreta el navegador para visualizarlo con una estructura y diseño determinados. La página entera debe estar contenida entre las etiquetas <html> y </html>, y dentro suele haber dos secciones importantes, el encabezado, contenido entre <head> y </head>, que contendrá información acerca de la página, como su título (<title>Título</title>), autor, o la codificación del texto. La sección head puede estar vacía por el momento, aunque basta con copiar el código siguiente y servirá (al igual que la primera línea <!DOCTYPE html>, que indica que estamos trabajando con HTML5). Y el cuerpo principal de la web, entre <body> y </body>, que será lo que veamos realmente en la página. Por ejemplo, si escribimos el siguiente código:

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="description">

<meta name="keywords" content="keywords">

<meta name="author" content="author">

<link rel="icon" href="images/favicon.ico">

<title>Ejemplo</title>

</head>

<body>

<h1>¡Hola mundo!</h1>

</body>

</html>

y guardamos los cambios, al acceder a localhost/Ejemplo nos mostrará esta página principal index.html, de la siguiente manera:

Como vemos, por ahora la web es un simple mensaje de bienvenida. Ese ¡Hola mundo! está contenido dentro del cuerpo, y es lo único que hay. Y además, está entre las etiquetas <h1></h1>, lo que significa que tendrán un estilo de título grande. Existen también etiquetas h2, h3, h4, h5 y h6, a cada cual un poco más pequeña que la anterior. Y si queremos escribir un párrafo normal y corriente, lo haríamos con la etiqueta p. En el siguiente ejemplo vemos algo un poco más elaborado (sólo se incluye la sección del cuerpo):

<body>
<h1>¡Hola mundo!</h1>
<h2>Esta es mi primera web</h2>
<p>
He estado siguiendo los pasos del post que hay en el blog <i>consejosinformaticos.blogspot.com</i> y he llegado hasta aquí. 
<b>¡Un saludo a todos!</b>
</p>
<h3>Alberto</h3>
</body>

y el resultado es el siguiente:

Vemos como cada línea tiene un estilo distinto. La primera está entre h1, lo que le da el aspecto de título grande, siguiendo la tradición de los periódicos. La segunda es un h2, que viene a ser un subtítulo. La tercera es un simple párrafo, contenido entre la etiqueta p. Pero además en esta misma línea vemos una parte en cursiva y otra en negrita. Para ello, lo que queramos resaltar como tal debemos encerrarlo entre las etiquetas i para cursiva y b para negrita, tal y como se ve más arriba en el código ejemplo. Y por último, la última línea es un h3.

6. Continuará. Por ahora esto es todo. Lo más complicado y pesado son los primeros pasos, configurar el servidor, corregir posibles errores y configurar cosas. Aquí hemos comentado lo típico que se debe tocar antes de empezar a usar WAMP, pero es posible que a cada usuario le aparezcan distintos errores que ahora mismo no he contemplado. Siempre se puede buscar en internet, o preguntar aquí en comentarios para solucionarlos. Y el primer ejemplo de web que hemos visto es muy sencillo, únicamente texto y sin formato. Más adelante veremos cómo añadir más elementos, como botones o cuadros de texto, y cómo darles otro aspecto más atractivo. También veremos cómo crear nuestra propia base de datos para poder introducir y manejar datos desde nuestra web.

ATENCIÓN: Si has tenido problemas con la instalación de WAMP, o no te funciona el servidor Apache o PHP y no sabes qué hacer y no te quieres complicar la vida, puedes probar cualquier código HTML que veamos sin necesidad de instalar nada, gracias al editor de W3Schools:

Tryit Editor

Si tienes todo bien instalado en tu equipo, para probar los códigos basta con que los guardes en un fichero .html, y tras guardar cada cambio, cargues de nuevo la dirección localhost en tu navegador. Pero el editor anterior te sirve para probar códigos online, sin instalarte nada. No podrás decir que tengas un proyecto web, pero al menos te servirá para probar código.


Extra:

WAMP Server
Configuración de Apache
Configuración de PHP
Notepad++
Notación HTML