Crea tu web, tutor html, css

El entorno local

El entorno local será tu taller web. Habitualmente vas a trabajar en tu propio ordenador (o el de tu puesto de trabajo si eres asalariado), es ahí donde crearás y editarás las páginas que forman tu sitio web y los elementos que incluyas en él como imágenes o videos o bases de datos. Por eso le llamo tu taller web.

Una vez tengas tus páginas preparadas las enviarás al servidor donde tengas alojado tu sitio web, y donde serán accesibles desde cualquier lugar utilizando un navegador web. Ese anvío la harás mediante un cliente de FTP independiente o integrado en tu editor de páginas o integrado en el CMS de tu servidor..

Antes de pasar tu sitio de la fase de desarrollo (mientras lo estás creando) a la de producción (cuando ya está listo para ser público) debes asegurarte de que todo funciona correctamente. Puedes tener un servidor de pruebas en internet o puedes tener un servidor de pruebas en modo local, en tu propio ordenador. Yo te recomiendo esto último, es muy fácil y es mucho más rápido a la hora de modificar o de corregir errores.

La idea base que te recomiendo es disponer en tu ordenador de un entorno que imite al internet real con las herramientas para la creación y edición de las páginas web y los recursos que uses en ellas.

El entorno local, tu taller web, se va a basar en el sistema operativo de tu ordenador: Linux, Windows o Mac. Normalmente todos los servidores y herramientas que te cito están disponibles para cualuiera de estos sistemas operativos (o existe alguno similar). Por otro lado el sistema operativo de tu servidor de internet puede ser Linux (recomendable) o Windows, es decir, no tiene que ser el mismo que tu usas. No te preocupes si el sitio web funciona en tu ordenador (en tu entorno local) también va a funcionar en internet, quizás a veces tengas que hacer pequeños retoques puntuales.

Entorno local de trabajo

La edición de páginas o de recursos usados en ellas la haces en tu entorno local. Una vez preparadas las envías (las subes) al servidor

Organizar el entorno

La parte física es seguro que ya la tienes: un ordenador y una conexión a internet. Probablemente necesites una impresora y un escáner. Lo básico en cualquier sistema informático.

En el apartado lógico para poner en marcha tu entorno de desarrollo tendrás que instalar un servidor web en tu ordenador, algo que simulará el servidor real que tienes en internet. Casi seguro que tu alojamiento de internet funciona en base a un programa  servidor de páginas web llamado Apache, quizás on un serviodr ngynx. Para tu entorno local (tu simulador de internet) te basta con un servidor Apache. Es un producto gratuito con una enorme comunidad de usuarios y por tanto con mucha ayuda en caso de dudas.

Si tu sitio web va a trabajar con bases de datos o vas a usar programas que corren en el servidor (porgramas de lado servidor) tendrías que instalarte también un servidor de base de datos y el entorno de programación PHP.  Te aclaro un poco esto por si no te suena:

Los sitios que generan páginas dinámicas, cuyo contenido no es permanente sino que se lee de una fuente externa necesitan de algún programa que se ejecuta en el servidor. Estos programas se crean utilizando un lenguaje de programación conocido como PHP (hay más pero este es el más conocido y usado). Si conoces el lenguaje y vas a trabajar con él necesitarás instalarlo también en tu ordenador. De nuevo es una tarea sencilla. El intérprete de PHP es también gratuito.

Y si trabajas con PHP es más que probable que necesitas un servidor de base de datos, es decir, una apllicacion que permita almacenar y leer los datos que serán utlizados por las paginas web en un entorno de red (internet). Sistemas de gestión de bases de datos hay varios pero en la práctica el más utilizado en internet es MySQL funcionando en el servidor MariaDB, que también es gratis.

Puedes instalar cada uno de estos programas de manera independiente o utilizar un instalador que los contiene a todos y que facilita enormemente la tarea. Uno de los más usados es el XAMPP que contiene el servidor Apache, el gestor de base de datos MariaDB, el intérpete PHP y un intérprete Perl (otro lenguaje de programación). Existe en versión para Linux, Windows y Mac.

Xampp

El entorno de trabajo en el aspecto físico es un ordenador y una conexión a internet. La parte software es un servidor web (aparte de las herramientas de edición)

Instalar Xampp

Para instalar Xampp lo primero es tenerlo en nuestro ordenador, para lo que simplemente lo descargamos de la página oficial de Apache Friends. Allí elegimos la opción de nuestro sistema operativo y descargamos el instalador. Estos pasos que siguen son los elementales para una instalación básica en Windows y te permitirán tener el servidor Apache corriendo en tu ordenador con la dirección http://localhost/

Una vez descargado tan solo queda ejecutar el archivo. Se abrirá la ventana habitual de los instaladores del sistema. En windows nos lanza un aviso sobre permisos si están activadas las cuentas de usuario y recomienda no instalarlo en la carpeta de Archivos de Programa. Pues le hacemos caso y lo instalamos en otra carpeto como por ejemplo C:\xampp (ya, muy original ¿verdad?)

Instalando Xampp
Ventana de aviso sobre las cuentas de usuario y permisos. Pulsa OK y continúa

Pasará a otra ventana donde nos permite seleccionar las aplicaciones a instalar. En principio con el servidor Apache sería suficiente, pero si vas a usar bases de datos y php pues selecciona la opción de PHP,  MySQL y phpMyAdmin (administrador web de bases de datos).

Instalando Xampp
Selecciona los componentes que necesites

Te pedirá una carpeta para la instalación, en ella se guardaran las páginas web y los recursos de los sitios que crees. Escoge c:\xampp.

Instalando Xampp
Elige la carpeta de intalación para el servidor local

Al final de la instalación te saltará la pantalla de seguridad pidiendo que des permiso al firewall para permitir el acceso de los servidores que has instalado. La opción pordefecto es suficiente para tu entorno local.

Al acabar se iniciará el panel de control de Xampp donde podrás configurarlo.

Instalando Xampp
Panel de control del paquete Xampp

En este panel de control inicas o detienes los servidores, si quieres que se inicien con windows activalo en la condiguración (botón config)

También en este panel puedes acceder a las configuraciones de los servidores instalados y a los registros de actividad (logs)

Una vez finalizada la instalación tendrás una carpeta c:\xampp\htdocs, será la carpeta donde se guardan las páginas web de tu servidor. Accedes a ella mediante la direción http://localhost. o http:127.0.0.1. Tras la instalación verás archivos propios de Xampp.

Al ejecutar Xampp verás en la barra de notificaciones un nuevo icono con los servidores que hayas instalado

Si quieres un sitio vacío creas una carpeta con el nombre del sitio, por ejemplo, misitio. Dentro guardas las páginas de tu sitio web. Accederás a ellas con la url http://localhost/misitio/

Xampp es un paquete que te facilita la tarea de instlar y configurar los servidores que forman tu espacio de trabajo local