Herramientas

El entorno

Software básico

Si estas trabajando en desarrollo web y ya editas páginas es seguro que tienes preparado el entorno de trabajo.

Si no lo tienes  pues lo mínimo que necesitas es

  • Servidor web
  • Editor de HTML
  • Editor CSS
  • Editor de Javascript

Para editar HTML, CSS, Javascript solo necesitas un editor de texto pero siempre ser´amás cómodo un editor dedicado al entorno web.

Para escribir código javascript no es necesario tener conocimiento de HTML y CSS, pero para aplicarlo a las páginas web si que te hacen falta. Así que si no conoces estos lenguajes puedes comenzar a estudiarlos en mi otro sitio dedicado al desarrollo web: CreaTuWeb

Herramientas propias
El uso de los colores en las páginas web a veces es complicado: lograr ben constraste, no pasarse con los colores llamativos, usar colores coherentes... Para ayudarte aquí tienes una herramienta de creación propia con la que podrás generar paletas de colores afines.

Más adelante colocaremos otras utilidades.

Servidor web

Tu sitio web local

Es imprescindible tener instalado un servidor web local para probar tus proyectos. Lo más simple es el Apache, my sencillo de instalar y configurar.

Puedes descargarlo e instalarlo gratuitamente. En las páginas de apache tienes la versión para Linux tienes los archuivos fuentes que tendrás que compilar

Para windows dispones de distribuciones instalables descargables desde

También existen paquetes en sabores Linux y windows, que integran otras aplicacionws web (como php, mysql)

Usar uno u otro depende de tus gustos y tus objetivos. Si estás en windows Laragon es lo más completo.   

Si quieres control absoluto sobre todo el entorno lo recomendable son las instalaciones por separado de servidores y aplicacones que necesites

Si quieres comodidad y facilidad de instalación, uno de los paquetes integrados sería lo más recomendable.

Editor

Escribir el código

Realmente no vas a trabajar con un editor para cada lenguaje: CSS, HTML o Javascript. Un solo editor te va a servir para todo. Los editores dedicadosa programación incluyen ayudas que facilitan la escritura del código, es fundamental que tengan las referencias a los comandos que te van mostrando ayuda sobre sus uso mientras vas esciribendo.

Tembién debes buscar que poseean un debugger o depurador, te qyudará a encontrar esos pequeños errores que siempre se pueden escapar.

Existen varias opciones tanto para Linux como para Windows. Los más socorridos son

Son editores todo terreno, con las extensiones adecuadas puedes editar en cualquier lenguaje. Tienen la ventaja de que también incluyen un depurador de código, básico para encontrar los inevitalbes errores de todo programa.

Para mi gusto Visual Code Studio es fácil de utilizar y admite un gran cantidad de extensiones. La depuración no es nada difícil y es muy extensible.

Utilidades

Otras herramientas

Una vez tienes tus aplicaciones construídas y en funcionamiento toca optimizar y revisar. Existen utilidades que pueden mejorar algo el rendimiento .de tus páginas conteniendo ese código que tanto te ha costado construir:

Minifiers

Son utilidades que minimizan el tamaño de tus scripts, eliminando todo lo que no sea código: espacios y comentarios, algunos también cambian los nombres de las variables para minimizar aún más el tamaño. Con esto logras que tu archivo sea más pequeño y por tanto tarde menos en ser cargado pro las páginas web. Cuanto más lineas de código mas se nota esta optimización. Recuerda tener siempre la página original, porque un archivo minimizado es casi imposible de editar.

Hay editores que llevan esta utilidad incorpordado es incorporable mediante algún pluign, existen aplicaciones online y de escritorio

Debugger

Depurar el código es una tarea inevitable, es normal que algo falle buscar un error en un código de cientos de lineas no es fácil. Un depurador permite ejecutar el código paso a paso e ir viendo como se comporta, cuales son los valores de las variables durante el funcionamiento. En fin ves el programa en marcha y puedes averiguar fácilmente donde se encuentra el error. Los editores pueden lelvarlos incoporados o puedes usar el que que incorpora el navegador: Herramientas para desarrolladores. Es un panel con varias pestañas que desentraña todas las interioridades de la página web que se esté viendo. Tiene una pestaña source mediante la que accedes al código fuente de los archivos involucrados en la página (html, css, javascript...), puedes ponerle puntos de parada (brekpoints) e ir ejecutando el programa paso a paso.