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.
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.
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.
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.
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.
Y ahora observe que estamos viendo nuestro sitio en nuestra nueva y brillante dirección web.
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.

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.

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.

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!