30 Herramientas de Desarrollo Web 2021

La fase de planificación, por ejemplo, es vital. Hay que tener en cuenta el wireframing (estructura de páginas, categorías, secciones, etc), las opciones de diseño (colores, fuentes, botones, sombras, contrastes, bordes) y los flujos de trabajo (la estrategia del proyecto y qué objetivo va a cumplir)

Cómo elegir la lista de desarrollo adecuada para tu proyecto

Consideraciones

La elección de la pila adecuada para el proyecto se reduce a lo siguiente:

  • Complejidad: Considera la complejidad de tu producto final, ya que esto determinará la complejidad de la pila.
  • Escalabilidad: Si tu proyecto es para una empresa local, necesitarás soluciones diferentes a las de una empresa global. Por ello, necesitarás una pila más escalable para lograr tus objetivos.
  • Seguridad: Casi no hace falta decir que lo que elijas no debe comprometer la seguridad del usuario y del sitio.
  • El coste: Por supuesto, a nadie le gusta gastar de más, y si hay presupuestos ajustados de por medio, esto tendrá más peso que una chequera en blanco.

Existen dos áreas en las que se pueden dividir las tecnologías:

  • Lado del servidor: Aquí, querrás ver las tecnologías de backend que utilizas. Por ejemplo, deberás tener en cuenta la elección del alojamiento y el servidor web, el almacenamiento de valores clave y SQL, los marcos de aplicación y automatización que vayas a utilizar y, por supuesto, el lenguaje de programación.
  • Del lado del cliente: La elección de las herramientas de frontend será posiblemente más sencilla, especialmente en lo que respecta a los lenguajes que se utilizan. Mientras que HTML, CSS y JavaScript serán los protagonistas, la elección del marco de trabajo de JavaScript (y el marco de trabajo de automatización) necesitará alguna consideración.

30 impresionantes herramientas de desarrollo web para usar en 2021

Entornos de desarrollo local

Un entorno de desarrollo local es una parte esencial de cualquier pila de desarrollo. Sin embargo, es particularmente vital para el desarrollo web. Estas son algunas de las herramientas de desarrollo local más destacadas.

1. IONOS 1&1

El servidor por excelencia con WordPress integrado, soporte multisitios, certificaciones wildcard, subdominios, mails FTP, servicio de cron jobs integrado y mucho soporte 24/7 en múltiples idiomas.

IONOS VPS 1&1 Revisión Actualizada - WordPressSite

2. MAMP

El logotipo de MAMP.

Normalmente, combinan un sistema operativo (OS) – Linux, macOS o Windows – junto con el servidor web Apache, la base de datos MySQL y los lenguajes de programación Python, PHP y Perl en una pila. Como tal, una pila de servicios web como esta se seguirá utilizando en 2021.

El panel de control de MAMP Pro

El panel de control de MAMP Pro

3. XAMPP

La aplicación XAMPP

La aplicación XAMPP

XAMPP es otra pila de servicios web que recibe mucho amor por parte de los desarrolladores de PHP, incluyendo aquellos que crean productos de WordPress. La «X» del nombre representa la naturaleza multiplataforma de la herramienta. Ofrece instaladores para máquinas Windows, macOS y Linux:

La página de descargas de XAMPP

La página de descargas de XAMPP

Aunque antes había diferencias entre las distintas pilas de servicios web, las constantes actualizaciones y mejoras han igualado el campo. Sin embargo, XAMPP tiene un par de trucos únicos bajo la manga.

Por ejemplo, MySQL ya no es el sistema de gestión de bases de datos relacionales (RDMS) por defecto. En su lugar, XAMPP utiliza MariaDB. Es probablemente una representación más precisa de un servidor de producción, dado el cambio a otras soluciones tras la adquisición de Oracle.

Además, hay un instalador de aplicaciones web dentro del paquete XAMPP. Bitnami es similar a soluciones como Softaculous, pero Bitnami es específico para XAMPP:

La página de inicio de Bitnami.

La página de inicio de Bitnami.

Editores de texto y código

4. Visual Studio Code

Desde su lanzamiento en 2015, el uso de Visual Studio Code se ha disparado en los escritorios de desarrollo de todo tipo.

El editor de código de Visual Studio.

El editor Visual Studio Code.

Es un editor de código abierto desarrollado por Microsoft que ofrece lo suficiente en la caja para ser considerado un IDE. Sin duda, ofrece suficiente funcionalidad para captar más de la mitad del mercado: el 55% de los desarrolladores web utilizan Visual Studio Code a diario.

En su configuración por defecto, Visual Studio Code es ante todo un editor de texto. Sin embargo, cuando se combina con su biblioteca de extensiones, se vuelve lo suficientemente modular y flexible como para satisfacer cualquiera de tus necesidades de desarrollo:

La biblioteca de extensiones de Visual Studio Code

La biblioteca de extensiones de Visual Studio Code

Significa que puedes instalar linters y fixers para el idioma que elijas (sí, ESLint y PHP CS Fixer están ahí), junto con extensiones de Docker y Vagrant, y mucho más.

Hablando de lenguajes, Visual Studio Code es compatible con JavaScript, Node.js y TypeScript desde el principio. Sin embargo, el ecosistema de extensiones es tan rico que podrás encontrar algo de soporte el lenguaje que estés usando.

Además, también encontrarás una integración de primer nivel con otros productos de Microsoft, sobre todo con GitHub:

Visual Studio Code tiene una integración VCS dedicada con GitHub.

Visual Studio Code tiene una integración VCS dedicada con GitHub.

Visual Studio es completamente gratuito, y dado el conjunto de características, es ideal para muchos. Consideramos que VSCode es un excelente punto intermedio entre IDEA y Sublime Text. Hablando de eso, veamos este último a continuación.

5. Sublime Text

La aplicación Sublime Text.

La aplicación Sublime Text.

Sublime Text es un pilar dentro del mundo de los editores de texto. Es más reducido que la mayoría de las otras soluciones, aunque su apariencia miente sobre la potencia que hay bajo el capó.

Por ejemplo, verás mucho de lo que ofrece Sublime Text en otros competidores. La paleta de comandos es algo que verás en muchas soluciones porque es fácil de usar.

Paleta de comandos de Sublime Text.

Paleta de comandos de Sublime Text.

Además, hay potentes atajos de teclado para la edición, como hacer selecciones múltiples para editar varias columnas a la vez. Asimismo, la función Goto Anything ofrece combinaciones de atajos de teclado similares a las de Vim para recorrer tus archivos:

Sublime Text puede combinar las pulsaciones de las teclas para ayudarte a navegar.

Sublime Text puede combinar las pulsaciones de las teclas para ayudarte a navegar.

Sublime Text es una herramienta premium con un periodo de prueba muy liberal. Se puede considerar gratuita, pero para retribuir al desarrollador, deberías comprar una licencia para un uso extendido.

En nuestra opinión, para muchos programadores pequeños o aficionados, Sublime Text ofrece una gran experiencia de usuario (UX), proporcionando lo esencial. Sigue teniendo el favor de muchos desarrolladores por sus agradables efectos visuales, su diseño sencillo y su capacidad de ampliación.

6. Atom

En un momento dado, Atom fue muy utilizado por los desarrolladores. Sin embargo, desde la llegada de Visual Studio Code, su adopción ha disminuido. Es una pena porque es un gran editor de código que es adecuado para muchas aplicaciones diferentes.

La aplicación Atom.

La aplicación Atom.

Es una aplicación desarrollada por GitHub, lo que puede explicar por qué ha sido empujada hacia abajo en la jerarquía de Microsoft. Sin embargo, se actualiza regularmente y puede considerarse una versión alternativa de Visual Studio Code.

La edición de texto es funcional y, al igual que su hermano mayor, tiene integración con GitHub. También hay muchos complementos llamados «paquetes»:

El instalador de paquetes de Atom.

El instalador de paquetes de Atom.

Hay muchos temas disponibles para ayudar a adaptar Atom a tu flujo de trabajo y a tus proyectos. Atom incluye varios temas entre los que elegir, y algunos, como One Dark, son tan populares que se han colado también en otros editores:

El tema One Dark de Atom.

El tema One Dark de Atom.

Atom es un editor de código funcional que merece ser probado. Sin embargo, como Atom está construido sobre Electron (sin juego de palabras), algunos usuarios se han quejado de que los archivos grandes y los proyectos se ejecutan lentamente. Como tal, sugerimos que es bueno para proyectos pequeños y scripts rápidos (especialmente con el paquete de terminal incorporado), pero puede no ser el mejor para el trabajo complejo.

7. Notepad++

La página de inicio de Notepad++.

La página de inicio de Notepad++.

De entrada, vale la pena decir que Notepad++ no puede sustituir a ninguno de los editores de código «grandes» que ya utilizas, como IntelliJ IDEA o Visual Studio Code. Sin embargo, te dará más poder bajo el capó para scripts simples y aplicaciones de edición de texto en general.

Dependiendo de tus proyectos, podría tentarte a cambiar. A pesar de su sencillez, Notepad++ se utiliza en una gran variedad de proyectos.

Es un editor de código solo para Windows, lo que explica el elemento «plus-plus» de su nombre. Por supuesto, Notepad es un editor de texto sin complicaciones que se encuentra por defecto en las instalaciones de Windows. Notepad++ se parece a su hermano, pero también incluye características específicas de desarrollo como:

  • Ventanas con pestañas y divididas
  • Soporte para casi 80 lenguajes de programación
  • Función de autocompletado
  • Una lista de funciones, que ofrece una excelente manera de ver todas las funciones utilizadas en un archivo de un vistazo

Además, Notepad++ es flexible en lo que respecta a la gestión de proyectos. Admite tres enfoques diferentes: sesiones, espacios de trabajo y proyectos. Una vez que empieces a profundizar en Notepad++, verás que puedes utilizarlo para proyectos más extensos que los scripts de una sola página.

Creemos que Notepad++ se adaptará a los desarrolladores que quieran una gran funcionalidad, que además sea personalizable. En cuanto al uso, tiene ese aire de Vim de código abierto, que se adaptará a ciertos tipos de proyectos más que a otros.

8. El JetBrains Suite

Cuando se trata de IDEs de desarrollo, el conjunto de soluciones de JetBrains va a estar en (o muy cerca de) la parte superior de tu lista. El modelo de negocio es inteligente, ya que aunque hay muchos editores disponibles en JetBrains, todos son en realidad «subconjuntos» de su editor estrella, IntelliJ IDEA.

IntelliJ IDEA es un IDE Java líder

IntelliJ IDEA es un IDE Java líder

IDEA se presenta como un IDE de Java. Soporta prácticamente toda la funcionalidad de otras herramientas IDE de su gama. Y como tal, también soporta muchos lenguajes de programación.

Por ejemplo, PyCharm extrae la mayor parte de la funcionalidad de Python de IDEA y la empaqueta como su propia herramienta. También encontrarás que phpStorm y WebStorm hacen lo mismo.

PyCharm es un IDE específico para Python que es popular en el espacio del lenguaje

PyCharm es un IDE específico para Python que es popular en el espacio del lenguaje

El uso de IDEA es muy sencillo: JetBrains ha hecho un gran trabajo para que puedas codificar en lugar de meterte en configuraciones y ajustes. Puede ser una sorpresa, pero la línea entre el uso de un editor de línea de comandos como Vim y el uso de IDEA es a menudo delgada.

Ambas herramientas se centran en el flujo de trabajo y la eficiencia, aunque IDEA también permite importar los enlaces de teclado de Vim si te sientes cómodo trabajando de esa manera.

Las extensiones de IDEA le permiten utilizar los enlaces de teclado de Vim para que se sienta como un mago.

Las extensiones de IDEA te permiten utilizar los enlaces de teclado de Vim para que te sientas como un mago.

Suponemos que es probable que utilices IntelliJ IDEA si trabajas como parte de un gran proyecto o empresa con un acuerdo de software. Puede ser para compartir proyectos o para trabajar en un entorno consistente. Muchos desarrolladores de WordPress utilizan los productos de JetBrains por su solidez en la gestión de proyectos.

El precio también es un factor, e IntelliJ se basa en un modelo de suscripción que a menudo asciende a tres o cuatro cifras al año.

Pantalla de precios de IntelliJ IDEA

Pantalla de precios de IntelliJ IDEA

Aun así, existen algunas ediciones «comunitarias» de los productos JetBrains. Sin embargo, son versiones recortadas del software principal; esencialmente, son soluciones de código abierto con los elementos propietarios eliminados.

Además, JetBrains ofrece precios competitivos para proyectos de código abierto, startups, centros educativos, Docker Captains y muchos más grupos de nicho.

Herramientas de diseño web y creación de prototipos

Por supuesto, una aplicación web no es nada sin una buena experiencia de usuario (UX). Por ello, la creación de prototipos de diseños y elementos visuales suele requerir una herramienta específica. Las herramientas de diseño van a ser vitales tanto en el lado del servidor como del cliente del desarrollo. He aquí algunas opciones populares.

9. Figma

Figma es una herramienta de desarrollo web muy popular que permite colaborar en el diseño.

El editor de Figma.

El editor de Figma.

Puedes utilizar el editor de arrastrar y soltar para construir interfaces y otros elementos orientados al usuario. Para los desarrolladores, también puedes coger fragmentos de código para implantarlos en tus proyectos. Figma hace que el proceso – desde la ideación hasta la implementación – sea fluido y mantiene las revisiones bajas a lo largo de toda la cadena del proyecto.

También se beneficia de un conjunto homogéneo de herramientas para ayudar a elegir la fuente y el color. Este proceso contrasta con el uso de herramientas independientes como Type Scale:

La página web de Type Scale

La página web de Type Scale

…y un subconjunto de herramientas de desarrollo web como Adobe Color, Coolors, varios selectores de color y mucho más.

El selector de color de Coolors.

El selector de color de Coolors.

Mientras que Figma tiene valor para proyectos de un solo desarrollador, tiene más beneficios para un equipo a medida que aumenta su tamaño. A los equipos les gustarán los aspectos colaborativos de Figma, como el repositorio central de activos y los componentes reutilizables. Los líderes de los equipos también apreciarán las completas opciones de informes para ver cómo los miembros del equipo utilizan los distintos sistemas de diseño.

En cuanto a los precios, Figma cuesta 12 dólares por «editor» en el nivel estándar, que se eleva a 45 dólares por «editor» para los equipos basados en la empresa (por «editor», léase «asiento», es el mismo concepto). Por lo tanto, el precio podría aumentar en función del número de editores que se desee incorporar.

10. Sketch

Sketch es una aplicación exclusiva para macOS que también es muy mencionada entre los desarrolladores:

El logotipo de Sketch.

El logotipo de Sketch.

Es popular porque Sketch incluye muchas funcionalidades bajo el capó, y también es muy fácil de usar, lo que tiene sentido dado que es una aplicación nativa de macOS. Se parece un poco al IDE Xcode de Apple, lo que no es malo, y se siente muy bien al navegar.

Por supuesto, puedes llevar a cabo funciones esenciales como la edición de vectores y el cambio de tamaño de las restricciones. Sin embargo, hay mucho más en la aplicación que te ayudará a generar diseños y exportarlos a otros de forma rápida.

Por ejemplo, la función Smart Layout de Sketch, que utiliza un cambio de tamaño adaptativo para ajustarse a tus dimensiones y al diseño actual. También existen muchas herramientas de colaboración para que todo el mundo pueda sumergirse en un diseño y ayudar a perfeccionarlo.

Una visión general de Sketch for Teams.

Una visión general de Sketch for Teams.

Sketch se diferencia de una herramienta como Figma en que un freelancer o un desarrollador solitario puede subirse a bordo de forma gratuita, y luego comprar una suscripción una vez que exista la necesidad. En este sentido, el precio de Sketch es un pago único de 99 dólares o 9 dólares al mes por usuario.

11. InVision Studio

InVision Studio se vende exclusivamente como una aplicación de «diseño de pantallas». Tiene sentido, y además es más claro de entender. InVision Studio ofrece todas las características y funcionalidades estándar que se pueden esperar, como un editor intuitivo basado en capas y soporte vectorial.

La aplicación InVision Studio.

La aplicación InVision Studio.

Sin embargo, hay mucho más en la caja relacionada con la creación de prototipos y animaciones. Por ejemplo, puedes apuntar, hacer clic y arrastrar para enlazar mesas de trabajo y pantallas. Esta función te permite crear animaciones como parte del proceso de diseño y no como algo que se entrega después.

Animaciones dentro de la aplicación InVision Studio.

Animaciones dentro de la aplicación InVision Studio.

Hablando de traspasos, todo el equipo puede trabajar dentro de InVision Studio gracias a las bibliotecas de componentes compartidas, las opciones de sincronización global, un sólido modo de inspección y mucho más.

La estructura de precios también es competitiva. La versión gratuita de InVision Studio ofrece casi toda la funcionalidad de la versión de pago, con la única restricción del número de documentos que se pueden guardar. El nivel Pro es valioso por la potencia de la app (unos 95 dólares/usuario/año).

12. Affinity Designer

Si eres un usuario de Adobe Illustrator, habrás conocido Affinity Designer en el pasado. El enfoque de Serif para el diseño gráfico parece que va a dar a la solución de Adobe una carrera por su dinero:

La aplicación Affinity Designer.

La aplicación Affinity Designer.

Desde su lanzamiento, se ha ganado una base de usuarios cada vez mayor gracias a su buena relación con la comunidad, sus principios de diseño estelares y su atractivo modelo de precios. Existen versiones para Mac, Windows y iPad, y cada una de ellas puede trabajar con vectores, tramas o ambos a la vez:

El editor de Affinity Designer.

El editor de Affinity Designer.

Las herramientas a las que está acostumbrado de Illustrator están presentes, junto con un conjunto completo de perfiles de color y opciones de exportación:

Las opciones de exportación en Affinity Designer.

Las opciones de exportación en Affinity Designer.

En resumen, las características y la funcionalidad están en su lugar para crear gráficos profesionales para tus proyectos. Además, el precio es muy competitivo. Cuesta alrededor de 50 dólares a precio completo, que es un pago único. No tiene una opción basada en la nube como Illustrator. Aun así, por una tarifa única, obtienes el alcance de Adobe presentado de una manera subjetivamente mejor.

13. CodePen o JSFiddle

Cuando hablamos de IntelliJ IDEA anteriormente, no mencionamos una de sus características menores pero útiles: los archivos Scratch. Te permite escribir y probar rápidamente un fragmento de código sin tener que afectar a tu proyecto de trabajo actual.

Para los usuarios de otros editores de código, una solución como CodePen o JSFiddle es un excelente sustituto. Ambos funcionan de forma similar: hay tres editores de texto para HTML, CSS y JavaScript, y una pantalla de salida para ver el resultado:

La consola de CodePen.

La consola de CodePen.

Puedes nombrar tu «Pen» o «Fiddle» dependiendo de tu plataforma, guardarlo y compartirlo con otros. Es una idea tan sencilla que puede ayudarte a tomar tus ideas a medias sobre un aspecto de un proyecto y realizarlas en cuestión de segundos.

Para los desarrolladores que quieren iluminar un elemento concreto dentro de un archivo y mostrar dónde es posible realizar cambios, un «IDE online» es imprescindible. Además, la colaboración también es posible a través del chat o de un «micrófono en directo»:

La pantalla de colaboración de JSFiddle.

La pantalla de colaboración de JSFiddle.

En general, un IDE en línea podría considerarse una herramienta de desarrollo web «durmiente» en el sentido de que no se menciona con demasiada frecuencia, pero es utilizada por muchos desarrolladores para crear mejor código.

Git Clients

Tener una forma centralizada de almacenar el código, documentar los cambios y trabajar en él con un equipo sin duplicación es la tarea de un Sistema de Control de Versiones (VCS). Aquí hay algunos clientes que manejan un VCS: git.

Hablemos primero del propio VCS.

14. Git

Git es esencial para un desarrollador moderno y, como tal, es una de las herramientas de desarrollo web más importantes que existen. En pocas palabras, es una forma de documentar los cambios que haces en el código de tu proyecto y almacenarlos en «repositorios»:

Una lista de los commits de GitHub de WordPress.

Una lista de los commits de GitHub de WordPress.

Git fue inventado por el creador de Linux, Linus Torvalds, y utiliza una serie de comandos para añadir cambios en los archivos a un «área de preparación», donde luego los «confirmará» en un repositorio. A partir de ahí, los «empuja» a un repositorio remoto alojado en línea.

Aunque no es el único VCS disponible – el equipo de desarrollo de WordPress sigue utilizando Trac para muchos proyectos – es el más destacado. Un VCS como Git o Trac ayuda a los equipos a trabajar juntos alojando el código en una ubicación central.

Los comandos básicos son funciones de una sola palabra precedidas por git, que suelen utilizarse desde la línea de comandos. Por ejemplo:

git add file.php

Esta expresión agrega file.php a tu área de staging. En otras palabras, registra los cambios como algo que te gustaría almacenar sin dar los últimos retoques. Puedes hacer esto con un archivo o con todo un proyecto si lo deseas.

Para confirmar el archivo, ejecuta git commit. Desde aquí, puedes añadir un comentario para informar a otros sobre tus confirmaciones. Después de esto, tus cambios son almacenados y empujados a la «rama» principal. Por supuesto, eso depende de si estás trabajando en un «repo» remoto.

Si eres nuevo en Git y en los VCSs en general, GitLab tiene una gran guía para principiantes sobre el uso de Git en la línea de comandos. También hablaremos un poco sobre GitLab más adelante.

15. GitHub

Página GitHub de Kinsta

Página GitHub de Kinsta

Para la gran mayoría de los desarrolladores, GitHub es el lugar donde se almacenan los repositorios Git de los proyectos:

Repositorios GitHub de WordPress

Repositorios GitHub de WordPress

Es una solución propiedad de Microsoft que cubre mucho más que el alojamiento de Git. Hay un montón de herramientas de pruebas automatizadas también, y un intento de ofrecer características adicionales de colaboración.

Las funciones de colaboración de GitHub.

Las funciones de colaboración de GitHub.

Para los proyectos de código abierto, plataformas como GitHub son casi la opción de facto. Teniendo en cuenta esto, GitHub como herramienta de desarrollo web no tiene precio para muchos usuarios de código abierto, aprendices y desarrolladores en general. Esto es especialmente cierto cuando se indaga en el rastreador de problemas de GitHub para resolver un problema con los paquetes instalados.

Issue Tracker de GitHub.

Issue Tracker de GitHub.

GitHub no solo sirve para almacenar repos de programas. También sirve para otros proyectos de codificación, como el desarrollo web, e incluso para libros.

En general, GitHub es una herramienta fantástica que ayuda a construir una comunidad saludable a partir de muchas ramas dispares. Sin embargo, no es la única plataforma que existe.

16. GitLab

El logotipo de GitLab

El logotipo de GitLab

Lo hemos mencionado antes, pero GitLab es un competidor de GitHub, con un objetivo similar. Es esencialmente un host para los repos de Git, pero también ofrece algunos otros extras.

Mientras que GitHub se autodenomina «plataforma de desarrollo», GitLab se centra en «DevOps». En su nivel gratuito, GitLab ofrece todas las etapas del ciclo de vida de DevOps, pruebas de seguridad de aplicaciones estáticas, y alrededor de 400 minutos al mes para el Desarrollo Continuo (CD) y la Integración Continua (CI).

GitLab cae en su propio sentido de comunidad, que es la gran diferencia con respecto a GitHub. Es más sobre el despliegue y el ciclo completo de un proyecto. No es algo negativo, pero sí significa que GitLab es una plataforma más «insular», posiblemente no tan adecuada para proyectos de código abierto como GitHub.

Para la mayoría de los equipos, el nivel gratuito de GitLab será suficiente. Por unos 230 dólares al año, por usuario, obtienes acceso a análisis de tu código y productividad, unos 10.000 minutos de CD/CI, y mucho más.

17. Sourcetree

Sourcetree no es un host de repositorios Git, sino una interfaz gráfica de usuario (GUI) para gestionarlos. Es una de las muchas soluciones, como GitKraken, Sublime Merge, GitHub Desktop y muchas más.

La página de inicio de Sourcetree.

La página de inicio de Sourcetree.

Es un producto de Atlassian (¡y nos encanta Atlassian!) que se conecta con otros productos como Bitbucket para ofrecer una representación visual de tu repositorio Git.

Sourcetree se comercializa como un cliente Git fácil – y lo es – pero también es adecuado para los usuarios experimentados. Tiene mucho bajo el capó para soportar a un equipo que trabaja con Git (y Mercurial también).

Por ejemplo, Sourcetree hace cosas sencillas, como resaltar los cambios del último commit, pero también aborda más cosas si lo necesitas. Los jefes de equipo pueden revisar los conjuntos de cambios, trabajar entre ramas cuando lo necesiten y visualizar el código mediante gráficos y pestañas de información:

La vista gráfica de Sourcetree.

La vista gráfica de Sourcetree.

Que un cliente Git sea adecuado para ti depende de tus circunstancias. Si todavía estás aprendiendo, te recomendamos que te quedes con un Terminal mientras entiendes el flujo y el proceso. Para los profesionales o equipos con un amplio uso de Git, un cliente como Sourcetree va a recortar minutos del trabajo que haces cada día.

Herramientas para desarrolladores de navegadores

Sin un navegador web, no hay desarrollo web. Sin embargo, aunque el navegador que elijas sea fundamental para navegar por la web, también puedes utilizarlo para saber cómo funciona.

La mayoría de los navegadores modernos incluyen herramientas de desarrollo específicas para ayudarte a analizar el código del backend, que luego puedes llevar a tu proyecto. He aquí tienes algunas de las más populares.

18. Chrome Developer Tools

DevTools del navegador Brave.

DevTools del navegador Brave.

La pestaña Elementos será una visita habitual, ya que aquí es donde verás el código fuente de la página. Y, en nuestra opinión, la pestaña Rendimiento ofrece una visión de la carga de la página que otras DevTools del navegador no pueden igualar:

Ficha de rendimiento de Brave.

Ficha de rendimiento de Brave.

La pestaña de seguridad también ofrece buena información, que será necesaria para supervisar (o investigar) el sitio web de un cliente:

La pestaña de seguridad de Brave.

La pestaña de seguridad de Brave.

Aún mejor, podrás generar informes de Google Lighthouse directamente desde tu navegador basado en Chromium:

Un informe de Google Lighthouse desde las DevTools de Brave.

Un informe de Google Lighthouse desde las DevTools de Brave.

Las DevTools aquí son subjetivamente las mejores, por lo que los usuarios de Chrome y Chromium se apoyarán en ellas. Aunque otros navegadores también tienen DevTools, y también vale la pena considerarlos.

19. Firefox Developer Tools

La página de inicio de Firefox.

La página de inicio de Firefox.

Con una base de usuarios activos mensuales de unos 220 millones, Firefox sigue siendo un navegador popular, a pesar del dominio de Google. En el pasado, los desarrolladores alababan Firebug, y a menudo era líder en la depuración dentro del navegador.

Hoy, tenemos las herramientas para desarrolladores de Firefox:

Las herramientas para desarrolladores de Firefox.

Las herramientas para desarrolladores de Firefox.

Hay un conjunto de funciones básicas para ver el código fuente del sitio (Inspector), un depurador, memoria, almacenamiento y más.

Para los principiantes, la Consola es una puerta de entrada a la codificación en general, ya que se puede ejecutar JavaScript directamente en el navegador, y es una manera fácil de probar fragmentos y encontrar sus pies cuando se empieza:

Un ejemplo de consola de navegación.

Un ejemplo de consola de navegación.

A pesar de esto, pensamos que Firefox (y otros navegadores) tienes menos empaquetado en tus Herramientas para Desarrolladores que los navegadores basados en Chromium. Aun así, para la depuración entre navegadores y la resolución de problemas, a menudo se pone en funcionamiento Firefox. Por ello, es bueno que sean ideales para casi todas las tareas.

Frontend Frameworks

Hablando de frontend, necesitarás algo adecuado para crear sitios web impresionantes. La elección del framework aquí es crucial. Siempre debes seleccionar la mejor herramienta para el trabajo.

Teniendo esto en cuenta, veamos algunas opciones populares.

20. Bootstrap

La capacidad de respuesta móvil es una característica estándar en el diseño web moderno. Es un paso bienvenido, dado que la navegación móvil ha superado a la de los ordenadores de sobremesa. Por lo tanto, es necesario contar con una forma de crear sitios móviles rápidamente.

Bootstrap es una gran herramienta de desarrollo web que se está utilizando mucho:

El logotipo de Bootstrap.

El logotipo de Bootstrap.

Es un conjunto de herramientas que combina plugins de JavaScript, variables de Sass, algunos componentes preconstruidos, un sistema de rejilla responsivo de calidad y mucho más. Incluso hay un mercado de temas oficiales que funcionan con Bootstrap, y muchos sitios web de WordPress también utilizan temas construidos sobre el marco de diseño.

Por supuesto, el uso o no de Bootstrap dependerá de las necesidades de tu proyecto. Sin embargo, es lógico suponer que los proyectos de desarrollo web con presupuestos ajustados y plazos de entrega rápidos recurrirán a una solución «Bootstrapped» y la adaptarán a WordPress. Dado que el framework y WordPress son gratuitos, tu tiempo se convierte en el único factor de coste.

21. Tailwind CSS

Sobre el papel, Tailwind CSS no tiene sentido. Es un framework de frontend para un lenguaje que forma parte de la trinidad central del desarrollo web. Como tal, es lógico pensar que el usuario objetivo ya tendría los conocimientos adecuados sin necesidad de un framework.

En realidad, Tailwind CSS tiene mucho sentido. Es una forma de diseñar el frontend de tu sitio sin dejar el HTML.

Un ejemplo de Tailwind CSS

Un ejemplo de Tailwind CSS

Se utilizan clases de utilidad dentro de varias etiquetas para añadir CSS desde una hoja de estilo principal. Por supuesto, el CSS sigue siendo la principal fuente de estilo. Solo está fuera de tu vista mientras construyes un diseño usando HTML. Por lo tanto, te permite desarrollar la estructura y el estilo al mismo tiempo.

El enfoque nos recuerda al 960 Grid System y funcionaría bien encajando con ese marco. Dicho esto, existe el peligro de empaquetar elementos con tantas clases que podrías acabar liándote. Necesitarás paciencia y disciplina para trabajar con Tailwind CSS, pero si se adapta a tu proyecto, es un framework rápido y robusto.

22. Bulma

Todos los avances que hemos hecho en el diseño de estructuras y diseños de sitios, la creación de columnas flexibles, responsivas y dinámicas es un obstáculo para muchos. Aunque manejar esto no es lo único que puede hacer Bulma, este tipo de aplicaciones son la carne y las patatas del framework:

La página web de Bulma

La página web de Bulma

Al igual que Tailwind CSS, Bulma oculta el CSS y te da clases de utilidad para tu HTML. Está construido con Flexbox, mobile-first, y modular. Es genial si solo necesitas unos pocos componentes. También puedes mezclar y combinar frameworks si lo deseas.

Además, no necesitas ningún JavaScript para poner en marcha Bulma, ya que es solo CSS. Puedes añadir elementos de la interfaz, como botones, con un mínimo de código. Es un framework sencillo y de código abierto que puede adaptarse a las necesidades de tu propio proyecto. En nuestro libro, esa es una característica valiosa que harías bien en aprovechar.

23. Foundation

El equipo de ZURB tiene su propia visión de un framework CSS en Foundation. Se trata de una herramienta semántica y orientada a los dispositivos móviles que tiene dos versiones: para sitios y para correo electrónico:

Página de inicio de la Fundación.

Página de inicio de Foundation.

Foundation está construido con la accesibilidad como prioridad. Cada fragmento en Foundation viene con atributos ARIA dedicados. Sin embargo, antes de llegar a esta etapa, Foundation es impresionante para la creación rápida de prototipos debido a la forma en que se agrega a tu HTML. Puedes crear casi cualquier elemento estructural en tu página, incluso varios tipos de menús y navegación:

Creación de un menú de navegación en Foundation.

Creación de un menú de navegación en Foundation.

ZURB también proporciona una gran cantidad de documentación y tutoriales excelentes para que aprendas los entresijos del framework. Foundation es sencillo de usar, pero sospechamos que puedes adentrarte en la construcción de sitios y salir con diseños y funcionalidades complejas.

También encontrarás un montón de plantillas en el sitio web de la Fundación. Se trata de esquemas básicos que te ayudarán a ponerte en marcha:

Biblioteca de plantillas de la Fundación.

Biblioteca de plantillas de la Foundation.

En general, el framework Foundation hace lo que dice en la lata. Va a ser fundamental para el desarrollo de tu sitio, en lugar de permitirte añadir más funcionalidad. Por ello, es posible que no lo utilices en todos los proyectos. Sin embargo, cuando se emplea, hará el trabajo en todo tipo de sitios.

24. Material-UI

Hablaremos de React con más detalle más adelante, pero por ahora, debes saber que Material-UI se basa en la biblioteca de componentes de este framework de JavaScript. Para los que no saben, Material Design es la «filosofía» de Google sobre cómo diseñar el frontend de un sitio web. Significa muchas fuentes Roboto y bloques de color:

Material-UI busca cumplir con los estándares de diseño de Google.

Material-UI busca cumplir con los estándares de diseño de Google.

Importarás la librería en React y luego utilizarás etiquetas HTML dedicadas para construir tu sitio:

Creación de un botón en Material-UI.

Creación de un botón en Material-UI.

Para personalizar aún más el elemento, se añaden clases a las etiquetas HTML. Todo el bloque de código se envuelve en una función, y renderizará los detalles (y la página por extensión) en React.

También hay muchos temas gratuitos y premium, que cubren muchos casos de uso y precios:

La biblioteca temática de Material-UI.

La biblioteca temática de Material-UI.

Dado que Material-UI tiene un caso de uso específico – crear sitios en torno a Material Design – será un framework al que acudir si este es tu objetivo. En particular, la biblioteca de temas será un recurso valioso para empezar, independientemente de tu presupuesto.

25. HTML5 Boilerplate

La página de inicio de HTML5 Boilerplate.

La página de inicio de HTML5 Boilerplate.

Si eres un desarrollador de WordPress, es posible que hayas conocido Underscores. Es un tema básico de WordPress que te ahorra innumerables horas para crear los elementos funcionales y básicos de tu sitio. HTML5 Boilerplate hace lo mismo a nivel de diseño general.

Como tal, incluye siete archivos que abarcan HTML, CSS y JavaScript. Todos ellos contienen únicamente los archivos y el código más necesarios para representar una página. Más allá de ese punto, el resultado de tu página depende de ti.

HTML5 Boilerplate tiene muchos fans porque es más una utilidad para ahorrar tiempo que un framework completo. Por lo tanto, no hay visuales fuera de la caja para cautivar al «comercio de paso», pero pones HTML5 Boilerplate a tu servicio, puedes ver que acelera tu desarrollo de la manera Underscores hace para los desarrolladores de WordPress.

26. Materialize

Aunque no diríamos que Materialize es un competidor de Material-UI, es otro framework que busca utilizar los principios de Material Design para crear un diseño:

La página de inicio de Materialize.

La página de inicio de Materialize.

Sin embargo, en lugar de utilizar React, Materialize es un framework CSS. Eso hace que Materialize sea más fácil de implementar en el frontend. Al igual que otros frameworks basados en CSS, se utilizan clases dentro del HTML para introducir elementos en el frontend.

Dicho esto, también hay un montón de componentes de JavaScript para elementos como los modales y los desplegables:

Un menú desplegable creado con Materialize.

Un menú desplegable creado con Materialize.

Al igual que muchos de estos frameworks, existen temas premium que te ayudan a crear diseños con un estilo específico. Sin embargo, todos ellos son temas HTML estáticos, lo que puede suponer un problema si quieres implementar JavaScript. En estos casos, es posible que quieras considerar Material-UI en su lugar.

Frameworks para Aplicaciones Web

En pocas palabras, un framework o biblioteca de JavaScript permite trabajar con el llamado código «vainilla» de forma diferente. En este caso, es para crear aplicaciones y sitios web específicos. Existen un montón de «sabores» también – vamos a cubrir algunos.

27. React.js

Un ejemplo de código React sandbox.

Un ejemplo de código React sandbox.

React.js es una popular librería JavaScript diseñada por Facebook que impulsa muchos de los elementos más modernos de WordPress. Tanto el backend de WordPress.com como el Editor de Bloques utilizan React, y lo consideraríamos una forma de usar JavaScript que da prioridad a la interfaz.

El backend de Calypso para WordPress.com está construido sobre React.

El backend de Calypso para WordPress.com está construido con React.

Por ello, los desarrolladores de WordPress deberían, parafraseando a Matt Mullenweg, aprender React.js en profundidad. Sin embargo, no es solo un framework para desarrolladores de WordPress.

En cualquier lugar donde se necesite una interfaz de usuario (UI) moderna y dinámica, React será la primera opción a tener en cuenta. Utiliza una extensión de la sintaxis de JavaScript llamada JSX para crear elementos, que luego se renderizan en el Módulo de Objetos del Documento (DOM):

Regístrese Para Recibir el Newsletter

const name = "Ken Starr';

const element = <h1>Hello, {name}</h1>;

ReactDOM.render
  Element,
  document.getElementById('root')
);

La variable JavaScript dentro del JSX puede ser cualquier expresión válida, lo que permite construir argumentos complejos. Esto hace que React sea una opción fuerte cuando se trata de frameworks. Debido a su popularidad, pensamos que React debería estar en tu lista de «debes aprender», independientemente de dónde pases tu tiempo de desarrollo.

28. Vue.js

Vue.js es otro framework de JavaScript para la construcción de interfaces de usuario. Se basa en la «capa de vista» y es genial para integrarse con otras bibliotecas y frameworks.

El sandbox de Vue.js.

El sandbox de Vue.js.

En el lado HTML, Vue no podría ser más accesible. Le das a tu etiqueta un ID y llamas a una clave de un diccionario establecido en el lado de JavaScript. Los datos son ahora reactivos, y los datos y el DOM están vinculados.

En este sentido, Vue.js se parece mucho a algunos de los frameworks de CSS que hemos visto antes en el artículo. Este marco de trabajo es convincente, y te animamos a mirar la documentación para ver lo que es posible.

Aunque Vue.js admite declaraciones JSX, es más adecuado para utilizar plantillas basadas en las tecnologías web «clásicas». Como tal, va a ser ideal para los desarrolladores que no quieren trabajar solo en JavaScript.

29. Express.js

Estamos entrando en el territorio de los meta-marcos, ya que Express.js se conecta a Node.js y proporciona una base para otros frameworks.

La página de inicio de Express.js.

La página de inicio de Express.js.

Es un framework minimalista (de ahí su nombre), y una de sus principales ventajas es que ayuda a organizar los componentes del lado del servidor en un formato familiar de Modelo-Vista-Controlador (MVC). Como tal, el código parece más complicado que el de otros frameworks, incluso el de vanilla JavaScript:

var express = require('express');

var app = express();

app.get('/', function(req, res){
  res.send("Hello world!");
});

app.listen(3000);

Creemos que Express.js va a ser adecuado para aplicaciones que tiran y empujan mucho de las bases de datos. Eso hace que sea adecuado para muchas aplicaciones web modernas y desarrolladores de backend que quieran trabajar en tareas de frontend con un mínimo de estrés.

30. Svelte.js

Una regla sólida cuando se desarrolla para la web es asegurarse de que los sitios funcionen en tantos navegadores como sea posible. Dicho esto, en algunos casos, es posible que desees crear aplicaciones o sitios web sin soporte para los navegadores heredados. En estos casos, Svelte.js debería estar entre los primeros de la lista.

La página de inicio de Svelte.js.

La página de inicio de Svelte.js.

El framework recibe su nombre por el tamaño de su archivo: apenas 5kb una vez minificado. Tiene un formato similar al de jQuery que resultará fácil para los usuarios que estén familiarizados con él:

$('.hello').text("Hello svelte");

Hay menos de 40 funciones dentro de la API de Svelte, por lo que empezar será sencillo. Además, puedes añadir nuevas funciones con facilidad utilizando $.fn.

Encontrarás «polyfills» para el soporte de Internet Explorer 9, pero esta es casi la única concesión. Para un soporte hipermoderno de navegadores usando un framework súper ligero, Svelte.js podría ser el indicado.

Related Articles

Respuestas

Tu dirección de correo electrónico no será publicada.