Intermedio: instalar un servidor web local

HTML es un lenguaje accesible, y esa fue una de las razones por las que quise hacer este libro web. Es agradecido a la hora de comenzar. Si recuerda el primer capítulo (ese primer sitio web que creamos que era solo una frase o dos), recordará que no usamos ni una sola etiqueta HTML. Pero aún así podíamos abrir el archivo en el navegador y ver el contenido. Pusimos ese archivo en la web y ¡funcionó! Puede comenzar de manera simple y aumentar la complejidad según sea necesario.

Ahora estamos en uno de esos puntos. En el próximo capítulo, crearemos una página divertida con chistes, recursos de juegos de mesa y videos de YouTube integrados.

Desafortunadamente, los videos de YouTube no funcionarán con la forma en que hemos estado obteniendo una vista previa de nuestro sitio: abriendo archivos HTML con el navegador web. En su mayor parte, esa es una forma perfectamente correcta de obtener una vista previa de HTML. Pero en los casos en los que obtengamos datos de otros sitios web (como la transmisión de vídeo), necesitaremos imitar un servidor web de la vida real.

Un servidor web es un programa que hace que un sitio web esté disponible en una dirección. Cuando visita esa dirección con un navegador web, obtiene el sitio web. Instalaremos y ejecutaremos uno de estos para que nuestro sitio web esté disponible en una dirección local, es decir, una a la que solo pueda acceder nuestra computadora, no todos los usuarios de Internet.

Le daré varias opciones según el sistema operativo y los conocimientos técnicos necesarios. Así que no es necesario que lo lea todo. Utilice los enlaces a continuación para ir a la sección que corresponda a su caso.

Visual Studio Code (multiplataforma)

Microsoft publica una extensión de VS Code llamada Live Preview. Se ejecuta su sitio en un servidor web local y se actualiza automáticamente a medida que lo cambia. Puede instalarlo desde este enlace o hacer clic en el ícono de extensiones y buscarlo.

Captura de pantalla de la sección de nuevas extensiones de Visual Studio Code mostrando la página de la extensión  "Live Preview". La extensión está creada por Microsoft y tiene una descripción, calificaciones, instrucciones de uso y un botón de instalación visible.

Una vez instalada, podrá ver que la opción Show Preview (o Mostrar previsualización) está disponible cuando hace clic con el botón derecho sobre un archivo.

Se abre una ventana de VS Code que muestra el código HTML. El archivo "index.html" está seleccionado en la barra izquierda, mientras que se muestra un menú contextual encima del archivo index.html con la opción "Show Preview o Mostrar previsualización" resaltada.

Al hacer clic en él, se abrirá un panel lateral con una vista web en una dirección local. Puede usar esa vista previa, abrirla en el navegador navegando a la dirección, o hacer clic en Abrir en el navegador en el menú de la barra de direcciones.

Captura de pantalla de una ventana de VS Code. En el lado izquierdo hay un código HTML de una página web personal. En el lado derecho, se muestra la vista previa de la página web. "Blake's Homepage" con botones de navegación y una imagen de un cielo nocturno estrellado. La URL está resaltada en una barra de navegación.

macOS

El autor original del tutorial también es usuario de Mac, por lo que recomienda la aplicación WorldWideWeb. Es gratis para nuestros propósitos, pero tiene una actualización Pro que recargará automáticamente la página cuando realice cambios.

Funciona diciéndole la carpeta de su sitio web y luego haciendo clic en el botón de reproducción.

Captura de pantalla de la ventana de la aplicación titulada "WorldWideWeb", mostrando dos secciones principales: "Website Folder" y "Web Server." La sección "Website Folder" incluye un icono de una carpeta con el nombre "my-site," y la sección "Web Server" tiene un botón de reproducir marcado "El servidor está parado." Hay flechas rojas apuntando a cada icono para indicar todos los pasos a seguir.

Una vez que haga clic en el botón de reproducción, su sitio estará disponible en alguna dirección. Haga clic en Open Browser o Abrir navegador para visitar la URL en su navegador web predeterminado.

Captura de pantalla de la misma ventana. La interfaz muestra una carpeta de sitio web llamada "my-site" y un servidor web con la URL "http://blakes-mac-studio.local:8080". Hay íconos para acciones de carpeta y botones etiquetados como "Reveal in Finder" y "Open Browser". La URL y el botón Abrir navegador están resaltados.

Y ahora observe que estamos viendo nuestro sitio en nuestra nueva y brillante dirección web.

Ventana de un navegador web llamada "Blake's Homepage" con enlaces de navegación para Inicio, Blog, Acerca de y Currículum. La sección principal presenta una imagen de un cielo nocturno estrellado con nebulosas coloridas. Una flecha roja apunta a la barra de URL en la parte superior de la pantalla.

Windows y multiplataforma

Para los usuarios de Windows, tengo dos opciones para ustedes. Si está utilizando Visual Studio Code, le recomiendo ir a esa sección y consultar la extensión Live Preview de Microsoft.

De lo contrario, intente Simple Web Server. Una vez que lo haya instalado, puede hacer clic en el botón para crear un nuevo servidor.

Una captura de pantalla de la aplicación Simple Web Server. La pantalla muestra el texto: Aún no has creado ningún servidor en el centro con un icono de servidor encima. En la esquina inferior derecha, hay un botón amarillo con la etiqueta Nuevo servidor, resaltado con una flecha roja.

Luego puede apuntarlo a la carpeta de su sitio web haciendo clic en el botón del icono de carpeta y seleccionando la carpeta adecuada.

La imagen muestra la ventana 'Agregar servidor' desde la aplicación Simple Web Server. Incluye campos para 'Ruta de carpeta' y 'Puerto', con opciones para Opciones básicas, Opciones avanzadas y Páginas de error. Los botones etiquetados como Cancelar y Crear servidor se encuentran en la parte inferior.

Una vez que haya creado el servidor, lo verá en la lista de servidores. Haga clic en él para abrirlo. Desde allí, verá la URL donde está disponible su sitio y podrá hacer clic en el enlace para abrirlo en su navegador predeterminado.

Una ventana de Simple Web Server titulada 'Editar servidor' muestra opciones para un servidor web en ejecución. La URL resaltada es 'http://127.0.0.1:8080' y parece que se puede hacer clic en ella. Hay campos para la ruta de la carpeta, el puerto (establecido en 8080) y una casilla de verificación para la accesibilidad de la red local. En la parte inferior están los botones cancelar y guardar cambios.

Python y PHP (multiplataforma)

Esta es una opción más técnica. No es necesario ser un hacker de élite, pero deberá ejecutar un programa de línea de comandos desde su aplicación de terminal.

Python

Si no tiene ninguno de los dos en su máquina, Python es el más fácil de configurar. Vaya a la página de descargas de Python y descargue el instalador para su sistema (obtenga la versión 3).

Abra una terminal en su sistema y mediante el comando cd vaya hasta el directorio donde almacena los archivos de su sitio web. Allí ejecute este comando para arrancar el servidor web Python de pruebas.

python3 -m http.server

Esto hará que su sitio esté disponible en localhost en cualquier puerto que especifique (normalmente el 8000). Así que la dirección de su sitio web sería http://localhost:8000.

PHP

La instalación de PHP está fuera del alcance de este libro, pero está disponible para casi todos los sistemas. PHP nació como una tecnología de sitios web y, como comentaré en un capítulo adicional, PHP es útil para reutilizar fragmentos de HTML (como el menú de navegación) entre múltiples páginas del mismo sitio.

Si PHP está en su sistema, puede ejecutar el servidor de desarrollo PHP de manera similar al ejemplo de Python anterior.

php -S localhost:8000

Esto hará que su sitio esté disponible en http://localhost:8000.

URL relativas versus absolutas

Hasta ahora, dado que abrimos los archivos de nuestro sitio web directamente en el navegador, necesitábamos usar URL relativas. Las URL relativas se escriben desde la perspectiva del archivo actual. Por ejemplo, si estoy en una subpágina y quiero vincularme a una página de nivel superior, necesito usar la sintaxis .. para "subir" un nivel y encontrar la página de destino.

Cuando ejecutamos un servidor web, podemos usar URL absolutas. Una URL absoluta siempre se escribe desde la perspectiva del nivel más alto (el nivel más alto significa la carpeta que le indicamos al servidor web que use). No importa en qué subpágina esté, puedo vincularme a la página de inicio del sitio web de la siguiente manera.

<a href="/">Ir a la página de incio</a>

La barra diagonal representa el nivel superior (también podría haber escrito /index.html pero no es necesario porque los servidores web la usarán automáticamente si existe). Si quisiera vincular a la página acercade.html, podría hacerlo de la siguiente manera.

<a href="/acercade.html">Ir a la página Acerca de</a>

Lo bueno es que no importa en qué página estoy: puede ser una página de nivel superior o una subpágina. Esta ruta siempre conducirá a la página Acerca de, sin importar dónde se encuentre la página actual. Digamos que estamos en una página anidada en una carpeta.

<!-- imagine que actualmente estamos en una página del blog /blog/mi-post.html-->
<h1>Mi blog post</h1>

<!-- en lugar de esto, que *sí* funciona -->
<a href="../acercade.html">About</a>

<!-- podemos hacer esto -->
<a href="/acercade.html">About</a>

Antes no usábamos URL absolutas porque no estábamos usando un servidor web. Si hubiéramos intentado utilizar URL absolutas al abrir nuestro sitio web directamente en el navegador, la barra habría apuntado hacia la carpeta de nivel superior de todo el ordenador, lo que ciertamente no es lo que queríamos.

Ahora que estamos usando un servidor web, le dejaré a usted si quiere regresar y cambiar todas las rutas, pero eso hace que copiar y pegar el menú sea más fácil. Crear enlaces entre páginas es más sencillo cuando se utilizan URL absolutas.

A continuación

Ahora que tenemos un servidor web local, nuestro sitio web puede interactuar más fácilmente con otros sitios web. A continuación, crearemos una página con una variedad de cosas divertidas, ¡incluidos videos incrustados de YouTube!

Saltar al menú