Instalar software básico
En este artículo veremos qué software necesitas para hacer desarrollo web sencillo y qué tienes que instalar ahora, incluido un editor de código y algunos navegadores web modernos.
| Requisitos previos: | Familiaridad básica con el sistema operativo (SO) de tu computadora. |
|---|---|
| Resultados de aprendizaje: |
|
Editores de código
Un buen editor de código es una de las cosas más importantes que cualquier desarrollador debe tener disponible en su equipo. Además de ser el lugar donde escribes el código, los editores de código ofrecen muchísimas otras funcionalidades. Más adelante en la serie dedicamos un artículo entero a los editores de código.
Por ahora, te recomendamos instalar Visual Studio Code, porque está disponible en distintas plataformas, tiene un gran conjunto de funciones y buen soporte, y es el editor que más usamos. Deberías instalarlo ahora para seguir el resto de este artículo.
Navegadores web modernos
Tener navegadores web modernos a tu disposición es esencial para el desarrollo web, para que puedas probar tus sitios web o aplicaciones en los navegadores que usan tus visitantes para acceder a ellos. También tienes que mantener tus navegadores web actualizados, para que admitan las tecnologías web más recientes y tengan aplicadas las últimas correcciones de seguridad.
Los navegadores más habituales con los que te encontrarás son los siguientes:
- Navegadores de escritorio:
- Basados en Chromium: Google Chrome, Opera, Brave, Microsoft Edge, Vivaldi.
- Basados en Gecko: Mozilla Firefox.
- Basados en WebKit: Apple Safari.
- Navegadores de dispositivos móviles o alternativos:
- Basados en Chromium (Android): Google Chrome, Opera, Brave, Microsoft Edge, Samsung Internet, Vivaldi.
- Basados en Gecko (Android): Mozilla Firefox.
- Basados en WebKit (iOS): Apple Safari.
Nota: La mayoría de los navegadores para Android de la lista anterior también tienen versiones para iOS, pero históricamente todas funcionaban por dentro con el motor WebKit de Apple, debido a las normas de la App Store de Apple. En el momento de escribir esto, los navegadores están empezando a crear versiones para iOS basadas en sus propios motores de renderizado, debido a cambios regulatorios. Consulta Apple is finally allowing full versions of Chrome and Firefox to run on the iPhone (en inglés).
La mayoría de los navegadores modernos suelen instalar las actualizaciones automáticamente y aplican los cambios al reiniciarse. Normalmente puedes buscar actualizaciones en la página «Acerca de» del navegador. Está en lugares un poco distintos según el navegador y el sistema operativo, por ejemplo:
- Firefox: en Firefox > Acerca de Firefox en macOS, y en el icono del menú > Ayuda > Acerca de Firefox en Windows.
- Chrome: en Chrome > Información de Google Chrome en macOS, y en el icono del menú > Ayuda > Información de Google Chrome en Windows.
Qué navegadores instalar
Por ahora, deberías instalar un par de navegadores de escritorio y de dispositivos móviles o alternativos para probar tu código. Instala navegadores basados en al menos dos motores de renderizado distintos (por ejemplo, Chromium y Gecko), para no probar solo en varios navegadores basados en el mismo motor. Esto es importante porque tu código puede tener errores que solo afecten a un motor de renderizado.
Los navegadores basados en WebKit no están disponibles para los sistemas operativos Windows, Linux y Android. Si quieres probar tu código en los tres motores de renderizado principales y tu computadora usa Windows, necesitarás acceso a un dispositivo de pruebas con macOS o iOS, o usar una solución por software, como una máquina virtual o una plataforma de pruebas. Sin embargo, en esta etapa no tienes que preocuparte por hacer pruebas exhaustivas: por ahora basta con reconocer que deberías probar tu código en distintos motores de renderizado y practicar un poco.
Verás las estrategias de pruebas con más detalle en nuestro módulo de Pruebas.
Servidores web locales
Normalmente, cuando escribes una dirección web en un navegador para cargar un sitio web, los archivos que tu navegador combina para mostrar ese sitio se obtienen de un servidor web remoto alojado en una computadora servidor en algún otro lugar del mundo. Aprenderás más sobre cómo funciona esto en el siguiente artículo de la serie.
Cuando creas un sitio web en local (en tu propio equipo), a menudo puedes cargar directamente en un navegador el archivo HTML principal para probarlo. Sin embargo, algunos ejemplos tendrán que ejecutarse a través de un servidor web instalado en local para funcionar correctamente.
Instalar un servidor web local
Una de las opciones más sencillas que hemos encontrado para tener un servidor local es usar una extensión del editor de código; así lo tienes disponible dentro del propio editor. Haz lo siguiente en Visual Studio Code:
- Abre el panel Extensiones con la opción del menú Ver > Extensiones.
- En el cuadro de búsqueda de la parte superior de este panel, escribe «live preview». El primer resultado debería ser la extensión Live Preview, creada por Microsoft.
- Haz clic en esa opción para abrir una página con información sobre ella, que incluye cómo usarla.
- Pulsa el botón Instalar para instalar la extensión.
- Ahora, cuando trabajes con un archivo HTML en el editor, deberías poder hacer clic en el botón «Show Preview» para abrir el ejemplo en vivo en una pestaña aparte.
La opción anterior es sencilla, pero no muy flexible. En el futuro, quizá quieras una opción de servidor local más flexible que se pueda usar para cargar ejemplos en cualquier navegador que tengas. Para otras opciones (y más información sobre por qué son necesarios los servidores locales), consulta ¿Cómo configurar un servidor de pruebas local?.
Editores gráficos
A menudo, los desarrolladores web tienen que manipular archivos de imagen para usarlos en los sitios web que crean. Esto puede implicar diseñar o crear recursos gráficos, pero también es habitual que los gráficos los proporcione un diseñador gráfico (que puede ser alguien del equipo o un tercero); en ese caso, al desarrollador web le pueden pedir que recorte o cambie el tamaño de los archivos que recibe.
Ninguno de los artículos de aprendizaje de MDN te pide crear tus propios gráficos, aunque algunos pueden pedirte que manipules los archivos que te proporcionamos.
Te recomendamos no instalar un editor gráfico hasta que lo necesites más adelante en tu aprendizaje. Y, desde luego, no gastes dinero en un producto comercial caro a menos que de verdad creas que te aportará valor.
Hay muchas herramientas de software gratuitas y servicios en línea que probablemente te bastarán por ahora, por ejemplo:
- macOS incluye una herramienta llamada Vista Previa. Se usa sobre todo para ver imágenes y PDF, pero también tiene funciones muy útiles para editar imágenes, como cambiar el tamaño, girar, recortar, anotar y convertir entre distintos tipos de archivo.
- La aplicación Fotos integrada en Windows incluye muchas funciones parecidas.
- El sitio web tinypng ofrece un servicio gratuito que te permite comprimir archivos PNG, JPEG y más. Es una tarea muy habitual que tendrás que hacer al preparar recursos para usarlos en un sitio web.
En cuanto a las opciones comerciales, Adobe Photoshop lleva mucho tiempo siendo el estándar del sector, sobre todo para la edición de fotos, mientras que programas como Sketch son más adecuados para el trabajo con iconos e interfaces de usuario. También hay recién llegados populares, como Figma, The Affinity Suite y Canva.
La mayoría de las aplicaciones anteriores tienen versiones de prueba o modos gratuitos que vale la pena explorar. También hay algunas aplicaciones gratuitas muy valoradas, como GIMP, Adobe Express y Paint.NET.
Herramientas de control de versiones
Los desarrolladores usan herramientas de control de versiones para gestionar archivos en servidores, colaborar en un proyecto con un equipo, compartir código y recursos, y evitar conflictos de edición. Ahora mismo, Git es el sistema de control de versiones más popular, junto con servicios de alojamiento como GitHub o GitLab.
Aunque las herramientas de control de versiones son esenciales para los equipos de desarrollo web, por ahora no tienes que preocuparte por ellas. Tenemos un módulo dedicado al Control de versiones cerca del final de nuestra serie de módulos principales (Core).
Aplicaciones para desplegar sitios
Cuando termines de desarrollar un sitio web o una aplicación (en tu computadora local, o quizá en un servidor de desarrollo), querrás ponerlo en un servidor web remoto para que tus usuarios puedan escribir la dirección web asociada y verlo en la web.
Hay varias formas de hacerlo: desde contratar un alojamiento y usar una aplicación de SFTP, hasta usar un servicio como GitHub Pages o Netlify, o incluso preparar una demostración rápida para compartirla con otras personas con algo como CodePen o JSFiddle.
Una lista de opciones así puede parecer abrumadora, pero no te preocupes: ahora mismo no necesitas saber nada sobre publicar sitios web. Veremos este tema muchas veces más adelante en el curso. Muy pronto tendrás experiencia práctica con él en nuestro módulo Tu primer sitio web.