Los documentos HTML, así como los archivos CSS y JavaScript, se componen de texto, lo que significa que podemos emplear cualquier editor disponible en nuestra computadora para crearlos. Esto incluye aplicaciones como el Bloc de notas en Windows o el editor de texto en los ordenadores de Apple. No obstante, también existen editores de texto diseñados específicamente para programadores y desarrolladores web, los cuales pueden simplificar significativamente nuestra labor. Estos editores resaltan el texto utilizando distintos colores para facilitar la identificación de cada parte del código, o proporcionan paneles laterales que listan los archivos del proyecto, permitiéndonos trabajar con múltiples archivos de manera simultánea.
IDE (Entornos de Desarrollo Integrado)
Esta es una lista de las IDEs (Entornos de Desarrollo Integrado) más utilizadas para trabajar con HTML, junto con una breve descripción de cada una:
- Visual Studio Code (VS Code): Es un editor de código gratuito y de código abierto desarrollado por Microsoft. Es altamente personalizable y cuenta con una amplia gama de extensiones que pueden mejorar la productividad de los desarrolladores web.
- Sublime Text: Es un editor de texto ligero y altamente personalizable que es muy popular entre los desarrolladores web. Ofrece una interfaz de usuario minimalista y poderosas capacidades de edición de texto, así como soporte para una amplia variedad de lenguajes de programación, incluido HTML.
- Atom: Es un editor de código de código abierto desarrollado por GitHub. Es altamente personalizable y cuenta con una gran comunidad de usuarios que han creado una amplia variedad de paquetes y temas para extender su funcionalidad.
- Brackets: Es un editor de código de código abierto desarrollado por Adobe. Está diseñado específicamente para desarrolladores web y cuenta con funciones integradas, como vista previa en tiempo real y edición en vivo, que facilitan el desarrollo de sitios web.
- WebStorm: Es un entorno de desarrollo integrado comercial desarrollado por JetBrains. Está especialmente diseñado para el desarrollo web y ofrece una amplia gama de características, incluida la finalización de código inteligente, depuración integrada y soporte para frameworks populares como Angular, React y Vue.js.
Estas son solo algunas de las muchas IDEs disponibles para trabajar con HTML. Cada una tiene sus propias características y ventajas, por lo que te recomendaría probar algunas y ver cuál se adapta mejor a tus necesidades y preferencias.
Personalmente elijo Visual Studio Code (VS Code) como tu IDE para trabajar con HTML por los siguientes motivos:
- Gratuito y de código abierto: VS Code es completamente gratuito y de código abierto, lo que significa que puedes descargarlo y usarlo sin costo alguno. Además, su código fuente está disponible para que la comunidad de desarrolladores contribuya y lo mejore continuamente.
- Multiplataforma: VS Code está disponible para Windows, macOS y Linux, lo que lo hace accesible para una amplia variedad de usuarios en diferentes sistemas operativos. En mi caso soy un 60% usuario de Linux y un 40% usuario de MS Windows y funciona exactamente igual en ambos.
- Rico en características: VS Code ofrece una amplia gama de características que pueden mejorar la productividad del desarrollo web, como la finalización de código inteligente, la depuración integrada, el control de versiones integrado y la vista previa en tiempo real.
- Amplia comunidad y soporte: VS Code cuenta con una gran comunidad de usuarios y una amplia gama de extensiones desarrolladas por la comunidad que pueden extender su funcionalidad según tus necesidades específicas. Además, Microsoft proporciona un sólido soporte técnico para el producto.
- Altamente personalizable: VS Code es altamente personalizable, lo que te permite ajustar la apariencia y el comportamiento del editor según tus preferencias. Puedes instalar temas, cambiar los atajos de teclado y agregar extensiones para adaptar VS Code a tu flujo de trabajo específico.
En resumen, VS Code es una opción popular y sólida para trabajar con HTML debido a su gratuidad, multiplataforma, características ricas, comunidad activa y alta personalización.
Trabajar con un editor es sencillo: simplemente creamos un directorio en nuestro disco duro donde almacenaremos los archivos del sitio web. Luego, abrimos el editor y creamos dentro de este directorio todos los archivos y directorios adicionales que necesitamos para nuestro proyecto.
Más adelante en nuestro curso explicaremos VS Code a fondo.
Registro de Dominios.
Una vez que nuestro sitio web esté listo para ser lanzado al público, necesitamos registrar un dominio que los usuarios escribirán en la barra de navegación para acceder a él. Como mencionamos anteriormente, un dominio es simplemente un nombre personalizado con una extensión que indica el propósito del sitio web. Tenemos la libertad de elegir cualquier nombre, y hay varias opciones de extensiones disponibles, desde extensiones comerciales como .com o .biz, hasta extensiones sin fines de lucro o personales como .org, .net o .info, e incluso extensiones regionales que indican la ubicación del sitio web, como .co.uk para sitios en el Reino Unido o .eu para sitios relacionados con la Unión Europea.
Para obtener un dominio para nuestro sitio web, necesitamos abrir una cuenta con un registrador y adquirirlo. La mayoría de los dominios requieren el pago de una tarifa anual, pero el proceso es relativamente simple y hay muchas compañías disponibles que pueden ayudarnos con el trámite. Yo utilizo WNPOWER para mis dominios y hosting (Link a WNPOWER), aunque la mayoría de las empresas que ofrecen servicios para desarrolladores también incluyen la opción de registrar un dominio. El proceso de registro es sencillo: debemos elegir el nombre y la extensión del dominio, realizar una búsqueda para asegurarnos de que el nombre esté disponible, y luego realizar el pedido (las compañías mencionadas anteriormente proporcionan todas las herramientas necesarias para este propósito).
Una vez registrado el dominio, el sistema nos pedirá los nombres de servidores (nameservers) que queremos asociar con él. Estos nombres son cadenas de texto compuestas por un dominio y un prefijo, generalmente NS1 y NS2, que indican la ubicación de nuestro sitio web (los nombres de servidor los proporciona el servidor en el que está alojado nuestro sitio web). Si aún no tenemos estos nombres, podemos usar los que ofrece la compañía y cambiarlos más adelante según sea necesario.
Alojamiento web
Configurar y mantener un servidor requiere conocimientos especializados que no todos los desarrolladores poseen. Por esta razón, existen compañías que ofrecen un servicio llamado alojamiento web (web hosting), que permite a cualquier individuo alquilar un servidor configurado y listo para almacenar y operar uno o varios sitios web.
Personalmente utilizo los servicios de hosting de WNPOWER para mis proyectos. Link a WNPOWER.
Existen diferentes tipos de alojamiento web disponibles, desde aquellos que permiten que varios sitios web funcionen desde un mismo servidor (alojamiento compartido), hasta servicios más profesionales que reservan un servidor completo para un único sitio web (alojamiento dedicado), o distribuyen un sitio web extenso en muchos servidores (alojamiento en la nube), incluyendo varias opciones intermedias.
La principal ventaja de tener una cuenta de alojamiento web es que todas ofrecen un panel de control con opciones para crear y configurar nuestro sitio web. A continuación, se describen las opciones más comunes que encontraremos en la mayoría de estos servicios:
- File Manager: Es una herramienta web que nos permite administrar los archivos de nuestro sitio. Con esta herramienta, podemos subir, bajar, editar o eliminar archivos en el servidor desde el navegador, sin necesidad de utilizar ninguna otra aplicación.
- FTP Accounts: Es un servicio que nos permite administrar las cuentas que utilizamos para conectarnos al servidor a través de FTP. FTP (File Transfer Protocol) es un protocolo de comunicación diseñado para transferir archivos desde un ordenador a otro en la red.
- MySQL Databases: Es un servicio que nos permite crear bases de datos para nuestro sitio web.
- phpMyAdmin: Es una aplicación programada en PHP que podemos usar para administrar las bases de datos creadas para nuestro sitio web.
- Email Accounts: Es un servicio que nos permite crear cuentas de correo electrónico con el dominio de nuestro sitio web (por ejemplo, info@midominio.com).
El costo de una cuenta de alojamiento puede variar desde algunos dólares por una cuenta compartida hasta cientos de dólares al mes por un servidor dedicado. Una vez que abrimos la cuenta, la compañía nos envía un correo electrónico con la información necesaria para acceder al panel de control y configurar el servidor. Por lo general, el sistema de la compañía crea automáticamente todas las cuentas básicas que necesitamos, incluida una cuenta FTP para subir los archivos, como veremos a continuación.
Aplicaciones FTP
Como mencionamos anteriormente, las cuentas de alojamiento web ofrecen un servicio que permite administrar los archivos del sitio web desde el navegador. Esta funcionalidad se presenta como una página web a la que podemos acceder desde el panel de control para subir, bajar y editar los archivos en el servidor. Aunque es una herramienta útil, resulta más práctica solo para realizar pequeñas modificaciones o subir algunos archivos. Esta herramienta utiliza un sistema integrado en los navegadores y trabaja con un protocolo llamado FTP (File Transfer Protocol), que se emplea para transferir archivos desde un ordenador a otro en una red.
Los navegadores incluyen este sistema para permitir a los usuarios descargar archivos, pero dado que su propósito principal es mostrar sitios web en pantalla, ofrecen una experiencia deficiente cuando se trata de manipular archivos. Por esta razón, los desarrolladores profesionales no suelen utilizar el navegador, sino que recurren a programas diseñados específicamente para transferir archivos entre un cliente y un servidor mediante el protocolo FTP.
Existen varios programas FTP disponibles en el mercado, tanto de pago como gratuitos. Uno de los programas gratuitos más populares y el que yo utilizo es FileZilla, disponible en www.filezilla-project.org. Este programa ofrece varios paneles con información sobre la conexión y los equipos involucrados, incluyendo dos paneles lado a lado que muestran la lista de archivos locales y remotos, lo que permite transferir archivos entre los equipos simplemente arrastrándolos de un panel a otro.
Cuando abrimos una cuenta de alojamiento, el sistema automáticamente crea una cuenta FTP para nuestro sitio web que incluye el nombre de usuario y la contraseña necesarios para conectarse al servidor utilizando este protocolo. Si el sistema no configura esta cuenta automáticamente, podemos hacerlo nosotros mismos desde la opción «FTP Accounts» en el panel de control. Los valores que necesitamos para realizar la conexión son el host (IP o dominio), el nombre de usuario y la contraseña, además del puerto asignado por el servidor para conectarse mediante FTP (por defecto, 21).
FileZilla ofrece dos formas de ingresar esta información: una barra en la parte superior que permite realizar una conexión rápida y un botón para almacenar múltiples conexiones de uso frecuente. Esto proporciona una manera conveniente de gestionar y acceder a diferentes conexiones FTP de manera eficiente.
Cuando pulsamos el botón para almacenar o acceder a conexiones previas en FileZilla, se abre una ventana donde podemos administrar la lista de conexiones disponibles y especificar opciones adicionales de configuración. Esta ventana incluye botones para crear, renombrar y borrar una conexión (New Site, Rename, Delete), así como campos donde podemos seleccionar el protocolo que deseamos utilizar (FTP para una conexión normal y SFTP para una conexión segura), el modo de encriptación utilizado para transferir los archivos y el tipo de cuenta requerida (Anonymous para conexiones anónimas o Normal para conexiones que requieren un nombre de usuario y contraseña).
Además, el programa ofrece paneles adicionales para una configuración más avanzada, lo que permite a los usuarios ajustar aspectos específicos de la conexión según sus necesidades particulares. Esto proporciona flexibilidad y control adicional sobre el proceso de transferencia de archivos mediante FileZilla.
En una situación normal, para establecer la conexión en FileZilla, debemos insertar el host (la dirección IP o el dominio de nuestro sitio web), seleccionar el tipo de cuenta como «Normal», e ingresar el nombre de usuario y la contraseña. El resto de los valores pueden dejarse por defecto. Una vez que los ordenadores se conectan, FileZilla muestra la lista de archivos en la pantalla. A la izquierda, se encuentran los archivos en el directorio seleccionado en nuestro ordenador (podemos elegir cualquier directorio en nuestro disco duro), y a la derecha se encuentran los archivos y directorios disponibles en el directorio raíz de nuestra cuenta de alojamiento.
Cuando se crea una cuenta de alojamiento, el sistema incluye varios directorios y archivos para almacenar la información requerida por el servicio, como almacenar correos electrónicos o hacer un seguimiento de la actividad de los usuarios. El directorio en el que deben almacenarse los archivos de nuestro sitio web se llama «public_html». Una vez que se abre este directorio en FileZilla, podemos comenzar a subir nuestros archivos arrastrándolos desde el panel de la izquierda al panel de la derecha.
XAMPP
Los documentos HTML se pueden abrir directamente en un ordenador personal. Por ejemplo, al abrir el archivo index.html en un navegador web, veremos el texto «HOLA MUNDO!». Sin embargo, aunque la mayoría de los ejemplos se pueden probar sin necesidad de subirlos a un servidor, no siempre es posible abrir un sitio web completo en un ordenador personal.
Algunos códigos JavaScript solo funcionan correctamente cuando se descargan desde un servidor, y tecnologías de servidor como PHP requieren ser alojadas en un servidor para funcionar adecuadamente. Para trabajar con este tipo de documentos, tenemos dos alternativas: obtener una cuenta de alojamiento web y usarla para hacer pruebas, o instalar un servidor en nuestro propio ordenador.
La instalación de un servidor en nuestro ordenador nos permite probar y experimentar con el código antes de subir la versión final a un servidor real. Existen varios paquetes que instalan todos los programas necesarios para convertir nuestro ordenador en un servidor. Estos paquetes incluyen un servidor Apache (para despachar archivos web a través del protocolo HTTP), un servidor PHP (para procesar código PHP), y un servidor MySQL (para procesar bases de datos de tipo MySQL que podemos usar para almacenar datos en el servidor). Una opción recomendada es XAMPP, un paquete gratuito y multiplataforma que se puede descargar desde https://www.apachefriends.org/download.html.
XAMPP es fácil de instalar y usar. Una vez descargado e instalado, solo necesitamos abrirlo para comenzar a utilizar el servidor en nuestro ordenador personal.
Aquí hay algunas razones por las cuales XAMPP es considerado una excelente opción:
- Facilidad de instalación: XAMPP es conocido por su proceso de instalación sencillo y rápido. La mayoría de las distribuciones están disponibles como archivos de instalación que se pueden ejecutar con unos pocos clics, lo que lo hace accesible incluso para usuarios con poca experiencia técnica.
- Paquete completo: XAMPP incluye todos los componentes necesarios para configurar un entorno de desarrollo web local, como el servidor Apache, PHP, MySQL y Perl. Esto significa que no es necesario instalar cada componente por separado, lo que simplifica el proceso y garantiza la compatibilidad entre ellos.
- Multiplataforma: XAMPP está disponible para varias plataformas, incluyendo Windows, Linux y macOS, lo que lo hace accesible para una amplia variedad de usuarios.
- Amplia comunidad de usuarios: Debido a su popularidad, XAMPP cuenta con una gran comunidad de usuarios que proporciona soporte, recursos y ayuda en línea a través de foros, tutoriales y documentación.
- Personalizable y escalable: Aunque XAMPP viene con una configuración predeterminada, es altamente personalizable y se puede adaptar para satisfacer las necesidades específicas de desarrollo. Además, es escalable y puede manejar proyectos de cualquier tamaño, desde aplicaciones web simples hasta sitios web complejos y bases de datos grandes.
En resumen, XAMPP es considerado una de las mejores alternativas debido a su facilidad de uso, versatilidad, compatibilidad multiplataforma y amplia comunidad de usuarios que proporciona soporte y recursos adicionales.