Hoy en día, ninguna empresa puede tener éxito sin presencia en la nube. Y para ello, además de estar presente en las redes sociales, también es necesario abrirse paso en la red publicando su propia página web. Por ello, el trabajo de programador, o diseñador, web es uno de los más solicitados por las empresas. Crear una web no es lo más complicado que nos podemos encontrar dentro de la IT, pero sí es necesario conocer una serie de herramientas que nos ayudarán a llevar a cabo, de la mejor forma posible, esta labor.
Editores de texto y IDEs
Para crear una web no hace falta más que un editor de texto plano. Los lenguajes de programación web, como HTML, CSS o JavaScript, son lenguajes planos que no tienen ningún tipo de interfaz ni requieren interacción. Cualquier editor nos va a servir para esta labor. Eso sí, existen editores, o mejor dicho, IDEs, con todo tipo de funciones pensados para hacer que la programación web sea mucho más sencilla y cómoda.
Visual Studio Code
Este es un editor de texto totalmente gratuito y de código abierto creado por Microsoft. Aunque a simple vista puede parecer un editor sencillo, en realidad estamos ante un IDE muy potente para todo tipo de programación. Podemos adaptar este programa al lenguaje que estemos utilizando mediante uno de sus muchos plugins, multiplicando rápidamente nuestra productividad.
Podemos descargar Visual Studio Code software desde aquí.
Atom
De forma similar al anterior, Atom es un editor de texto de código abierto desarrollado por GitHub. Este programa está basado en Electron, y aunque su principal finalidad es ayudarnos a crear todo tipo de aplicaciones de escritorio multiplataforma usando Chromium y Node.js, también podemos usarlo para crear nuestras propias páginas web, ya que es compatible con una gran cantidad de lenguajes de programación.
Podemos bajar el editor de texto Atom desde este enlace.
Sublime Text
Sublime Text es un editor de código profesional muy utilizado en sistemas operativos Linux, aunque también cuenta con su propia versión para Windows. Este software se puede descargar de forma gratuita, aunque tiene algunas de sus funciones limitadas, obligando a los usuarios a pagar la licencia del software. Este editor de código es una de las pocas aplicaciones privativas y de pago muy extendidas dentro de los sistemas operativos Linux. Es compatible con una gran cantidad de lenguajes de programación y, si dominamos sus atajos de teclado y sus comandos, podemos ahorrar mucho tiempo en las tareas de programación y depuración.
Podemos descargar este programa desde su página.
Bloc de notas
¿Para qué bajar e instalar software adicional? El bloc de notas es el editor de texto de Microsoft que viene instalado de serie en todos los ordenadores con Windows. Este programa no tiene ninguna de las características que nos ofrecen los anteriores (color de sintaxis, auto-completar, depuración, etc), pero si conocemos bien los lenguajes HTML y CSS podemos programar perfectamente en ellos sin necesidad de hacer nada más.
Navegador web y extensiones
Una vez que la web ya tiene forma, los navegadores web son una de las herramientas más útiles de cara a comprobar que todo va bien y depurar el código.
Firefox
Firefox ha sido, desde siempre, el navegador de los desarrolladores. El navegador de Mozilla contaba con una gran cantidad de herramientas de depuración para desarrolladores que permitían a cualquiera tener control total sobre todos los elementos y todas las variables de las webs. Por desgracia, desde hace tiempo estas herramientas se han abandonado bastante, pero aun así sigue siendo un excelente navegador para programar, sobre todo si lo usamos junto a algunas útiles extensiones.
HTML Validator
Esta extensión nos permite añadir un validador HTML dentro del propio Firefox. Cuando visitemos una web, esta nos mostrará un icono con todos los errores HTML que se hayan podido detectar, pudiendo solucionarlos para que nuestra página cumpla con una serie de estándares básicos.
Web Developer Checklist
Una extensión de lo más útil gracias a la cual vamos a poder analizar cualquier web para averiguar si esta hace uso de las buenas prácticas de programación o tiene fallos graves que no deberían estar. Nos ayuda a depurar y encontrar fallos graves en la página antes de que estos puedan influir negativamente en su posicionamiento.
Wappalyzer
¿Quieres que una web se parezca a otra que has visto? Gracias a esta extensión vas a poder averiguar qué tecnologías utiliza la web en cuestión de manera que podamos saber qué tecnologías debemos implementar.
Chrome
Google ha sido la compañía que mayor interés ha puesto sobre los estándares web. Y, por supuesto, su navegador ha dado ejemplo de ello. Además de una gran cantidad de extensiones que podemos encontrar para él, Google Chrome ofrece a los usuarios la consola de desarrollo más completa para analizar y depurar, en tiempo real, el funcionamiento de la web.
Consola de desarrollo
La consola de desarrollo de Chrome, que podemos lanzar pulsando la tecla F12 del teclado, es la más completa que vamos a encontrar. En ella vamos a poder ver el código fuente de cualquier página web y modificarlo a nuestro gusto, viendo los cambios reflejados directamente en la web. Esta consola cuenta con todo tipo de herramientas adicionales, como una consola sobre la que ejecutar código JavaScript en tiempo real o sistemas de control de rendimiento, que nos permitirán ajustar la página a la perfección.
Web Developer Checklist
Esta extensión nos permite analizar cualquier página web para comprobar si hace uso de las buenas prácticas de programación o tiene fallos graves que no deberían estar presentes. Muy útil para descubrir problemas que, a la larga, podrían ser perjudiciales para el SEO o el correcto funcionamiento de la página.
User-Agent Switcher
Esta extensión nos va a permitir cambiar el motor de la web para probar fácilmente cómo carga y se renderiza en otros navegadores web, como Firefox, Internet Explorer e incluso navegadores web. Una extensión imprescindible gracias a la cual podremos asegurarnos de que nuestra web funciona sin problemas en todos los ordenadores y dispositivos.
CMS (en caso de una web dinámica)
Si vamos a crear una web estática, un simple editor nos bastará. Pero si lo que queremos es crear una web dinámica, entonces necesitaremos un completo gestor de contenido, también conocido como CMS.
WordPress
WP es el gestor de contenidos más utilizado en toda la web. Este CMS es totalmente gratuito para todos los usuarios y cuenta con un desarrollo de código abierto, lo que permite a cada desarrollador adaptarlo según sus necesidades. Ofrece una gran cantidad de opciones de configuración, y una infinidad de complementos de todo tipo para que nuestra web sea única.
Joomla
Otro gestor de contenidos, CMS, totalmente gratuito y de código abierto con el que vamos a poder dar forma a nuestra página web. Entre sus principales funciones podemos destacar la generación de código HTML bien formado, facilidad para gestionar todo tipo de blogs, un sistema de foros integrado, búsquedas integradas y la posibilidad de traducirlo a varios idiomas. Es un CMS muy utilizado, además, a la hora de montar tiendas online.
Editar imágenes
Una web sin imágenes no dice nada. Por lo tanto, si realmente queremos destacar sobre los demás, es necesario contar con un buen editor que nos permita crear nuestras propias fotos, y los iconos que queramos, para nuestra página.
GIMP
Si estamos buscando un editor de imágenes gratuito, lo hemos encontrado. GIMP es un editor de fotos de código abierto que nos va a permitir realizar todo tipo de ediciones y modificaciones para crear las imágenes perfectas para nuestra página web. Una excelente alternativa para todos aquellos usuarios que no quieren gastar dinero.
Photoshop
Para aquellos usuarios a los que GIMP se les quede corto, pueden dar una oportunidad a Photoshop. El software de Adobe nos va a permitir editar todo tipo de imágenes, y procesarlas, de forma muy sencilla. Una herramienta que, como la anterior, no puede faltar en nuestro PC.
InkScape
Si queremos ir un paso más allá, en lugar de añadir las imágenes de siempre a nuestra web podemos optar por los gráficos vectoriales. Este tipo de imágenes están formadas por fórmulas matemáticas, lo que hace que ocupen mucho menos espacio y, además, se puedan redimensionar sin perder calidad. Un plus si buscamos profesionalidad.
FTP o SSH para el almacenamiento
Generalmente programaremos y probaremos la web en nuestro propio ordenador. Pero cuando queramos publicarla será necesario subirla a un servidor web. Y es aquí donde llega el último paso. Generalmente, los hostings de páginas web suelen hacer uso del protocolo FTP para permitirnos subir la página y dejarla lista para empezar a funcionar a través de Internet. Además, estos servidores también suelen tener el servicio SSH habilitado, gracias al cual vamos a poder conectarnos al servidor y controlarlo.
FileZilla, por ejemplo, es uno de los mejores clientes FTP para Windows que vamos a encontrar. Este programa nos va a permitir conectarnos a servidor, subir archivos, bajar archivos e incluso realizar modificaciones «en vivo». Y para conectarnos a través de SSH, con fines administrativos, entonces es necesario buscar otro programa compatible con este protocolo, como es el caso de PuTTY.
