5 Herramientas De Desarrollo Web Que Deberias Conocer

Hoy en día, la web está creciendo a grandes pasos. También, es cada vez más compleja que nunca. Existe la necesidad de tener más herramientas que puedan ayudar a disminuir algo del peso del desarrollo de los sitios web. Por lo tanto, en este post, hemos elaborado un listado de las ultimas herramientas que le serán de gran utilidad en el desarrollo web.

1. Pre Procesadores De CSS

Como hemos visto ó sabemos, la sintaxis en CSS es bastante fácil y sencilla de entender. El problema radica cuando nuestro proyecto crece, y asi mismo se aumentan las lineas de código y los archivos que las contienen. Aquí es donde los Pre Procesadores de CSS son realmente útiles. Anteriormente habíamos hablado de unos cuantos de ellos.

Para aquellos que son nuevos, en pocas palabras, los Pre Procesadores de CSS nos permiten escribir CSS de forma organizada con variables y funciones, que luego se compila en formato CSS. También podemos reutilizar propiedades CSS con algunas reglas especiales como @extend e @include.

Estos son algunos de los CSS Pre-processors: Sass, LESS, Stylus, and Myth.

2. Motor De Plantillas

La maquetación de una pagina es sencillo, pero que pasa cuando son demasiadas paginas, seguramente será todo un problema realizarlas una por una, no? El uso de un motor de plantillas suena mejor para esta situación. En la actualidad hay una serie de motores de plantillas que podemos usar como Kit, Jade, y Handlebars. Cada uno tiene sus propias convenciones de escritura. Kit, por ejemplo, sólo se logra con las variables y la capacidad de importación que se declaren con una simple etiqueta de comentario HTML, como la siguiente:

[html]

// example of importing a seperate template
<!– @include inc/partial –>
// this is a variable
<!– @var: The Variable Value –>

[/html]

Jade y Handlebars vienen con una gran cantidad de características robustas para trabajar en los proyectos más complejos. Vamos a hablar de ellos con más detalle en otro articulo (atentos!). El punto es que si usted quiere construir un sitio web estático escalable, usted debe tomar ventajas de un motor de plantillas.

3. Automatización De Tareas

El proceso de desarrollo de un sitio web es bastante repetitivo. Minificación, Compilación, pruebas unitarias, Union de archivos y Cache del navegador, por nombrar unos pocos, son las cosas que se implican en cualquier desarrollo. Por suerte, se pueden automatizar usando un Automatizador de Tareas, tales como Grunt y Gulp.

Se puede decir Grunt realiza una serie de tareas especificadas en Gruntfile.js. En la actualidad hay una gran cantidad de plugins para automatizar casi cualquier cosa con Grunt, por lo que no necesitan escribir sus propias tareas de Grunt.

Digamos que usted desea compilar su archivo LESS en CSS, puede instalar grunt-contrib-less. En el siguiente post encontramos una forma útil de implementar esta librería para quitar módulos innecesarios de jquery.

4. Herramienta De Sincronización De Prueba

Aquí hay una herramienta inevitable si usted está construyendo un sitio web optimizado para móviles. Si usted quiere probar su sitio web en diferentes dispositivos móviles, necesitará sin duda alguna una Prueba Sincronizada, lo que le permite probar su sitio web en varios dispositivos simultáneamente.

Prueba tu sitio web como si estuvieras desde un dispositivo móvil, para esto, esta la poderosa herramienta de Ghostlab.

5. Development Toolkit

Development Toolkit contiene una serie de herramientas en una sola aplicación. Si usted no se siente cómodo con la configuración basada en texto de Grunt, una aplicación con una fluida interfaz de usuario, probablemente sería una mejor opción para usted.

Codekit incluye LESS, Sass, Kit, Jade, Siml, Uglify, Bower, y mucho más en su lista de características.

Esperamos que esta 5 herramientas te sean de gran utilidad para el desarrollo web. Sabes de alguna otra herramienta? Compártela en un comentario.