Cómo crear nuestro primer sitio localmente

En la anterior publicación vimos como instalar XAMPP para tener nuestro entorno de desarrollo listo para que podamos probar nuestro sitio localmente, antes de trasladarlo a nuestro sitio de producción. Ahora veremos cómo crear nuestro primer sitio localmente, usando el servidor Apache instalado con XAMPP.

Como vimos previamente, los archivos del sitio se encuentran en la carpeta htdocs dentro de la carpeta xampp. Lo que se puede hacer para tener otro sitio es crear un virtual host que apunte a una carpeta donde podemos colocar nuestro sitio, pero este proceso es un poco complicado y si queremos comenzar a programar o experimentar con nuestro sitio instalando scripts ya desarrollados, podemos hacerlo de forma más fácil: simplemente creamos una carpeta dentro de la carpeta htdocs con el nombre que queramos y posteriormente cargamos el contenido ahí dentro.

Al crear la carpeta con el nombre que deseamos, nos debe quedar algo similar (la carpeta que he creado se llama descuajeringa):

Carpeta creada para colocar los archivos del sitio.

Si ahora accedemos a http://localhost/descuajeringa/ podremos ver el contenido del sitio vacío, solamente un listado de los archivos presentes en la carpeta, actualmente ninguno.

Cómo se ve el sitio al acceder a su carpeta con el navegador.

Ahora usaremos Dreamweaver para crear y editar los archivos del sitio. Lo primero que tenemos que hacer es crear un sitio nuevo desde el menú Sitio, seleccionando la opción Nuevo sitio… como se indica a continuación. Si bien para esta demostración se ha usado Dreamweaver CC, el proceso es básicamente el mismo para cualquier otra versión de Dreamweaver.

Menú de Dreamweaver para crear un sitio nuevo.

Cuando seleccionamos la opción Nuevo sitio… nos aparece un cuadro de diálogo en el que podemos crear el sitio en base a la carpeta que previamente hicimos. En el Nombre del sitio colocamos algo descriptivo que nos ayude a tener organizado nuestro portafolio de sitios en local.

Configuración del sitio en Dreamweaver.

Ahora podemos ver que el sitio está configurado en nuestro Dreamweaver, en el panel de Archivos de la barra lateral. Ahí podemos hacer click derecho sobre la carpeta que nos aparece con el nombre del sitio creado y seleccionar crear un archivo o una carpeta.

Dreamweaver con el sitio configurado que aparece en la pestaña Archivos.

En este caso he preferido crear un archivo index.html que será el que se vea al acceder a la carpeta donde está el sitio, desde el navegador. El servidor por defecto toma un archivo que se llame index.html o index.php como el archivo principal, que será mostrado en lugar de un listado de los archivos del sitio. Nuevamente, por defecto, el nombre del archivo debe estar escrito con minúsculas, si se coloca una mayúscula en su nombre, se verá el archivo listado en lugar de su contenido.

Se ha creado el archivo index.html

Ahora podemos editar el archivo haciendo doble click sobre él para que podamos abrirlo. Cuando se abre el archivo por defecto se inicia con la vista de Diseño de Dreamweaver, que no mostrará nada, pues el archivo no tiene contenido visible inicialmente. Para poder editar el código, presionamos el botón de Código que se encuentra justo debajo de la pestaña con el nombre de nuestro archivo.

Presionando el botón Código podemos comenzar a editar nuestro archivo.

Posteriormente guardamos el archivo con la edición que hayamos realizado (en este caso solamente coloqué la clásica frase “Hola mundo”) y al ingresar a la carpeta del sitio podremos ver que se carga directamente el archivo que muestra la frase colocada y nada más, tal como programamos el index.html.

El archivo index.html con el texto “Hola mundo” programado antes.

Ahora ya tenemos nuestro sitio y lo hemos editado. Ya podemos comenzar a colocar y editar más archivos, no solo HTML, si no PHP, estilos CSS y acciones JS, realizar conexiones a una base de datos, usar servicios externos, tantas cosas que solamente la imaginación es el límite.

En el siguiente post veremos cómo conectarnos mediante Dreamweaver a nuestro servidor de producción mediante FTP para comenzar a publicar nuestro contenido.