©2024 Escuela Tecnologías de la Información S.L. Todos los derechos reservados.
Curso de Herramientas Frontend
Aprende a trabajar de una forma profesional con las herramientas que mejorarán tu flujo de desarrollo frontend
Material disponible
Independientemente de tu perfil y de tus habilidades, conocer y dominar las herramientas de trabajo que hoy en día tienes al alcance no solo hará que agilices tus desarrollos sino que logres multiplicar tu calidad profesional en poco tiempo.
El Curso de Herramientas Frontend es una iniciativa 100% online que te mostrará las buenas prácticas, herramientas y procesos que usan es sus trabajos los mejores desarrolladores y que harán que te sorprendas de cómo has podido sobrevivir sin ellas hasta la fecha.
También veremos cómo implementar una colección de buenas prácticas que harán más robusto tu desarrollo y acabaremos con un repositorio de un proyecto base, nuestro propio boilerplate, con varias de estas herramientas pre-configuradas. Empezar a trabajar con las mejores condiciones en un nuevo proyecto será más rápido que nunca!
Para trabajar con los ejemplos podéis usar el editor de código con el que más cómodo os sintáis. Por nuestra parte, al ser varios docentes, usaremos varios editores o IDEs. Con esto podremos ver que esa herramienta en concreto dependerá de cada desarrollador.
Objetivos del curso
El objetivo del curso es proporcionar las habilidades necesarias para optimizar tu trabajo en el desarrollo de cualquier tipo de aplicación, gracias a herramientas como Preprocesadores, PostCSS, Linters, Grunt o Gulp, para ello contaremos con la tutorización de un equipo de profesionales y expertos en el desarrollo Frontend que te descubrirán los secretos de todas estas tecnologías. Aquí puedes ver el programa de contenidos completo.
Qué tengo que saber
Para poder seguir el curso con fluidez será necesario un nivel básico de HTML,CSS y Javascript. En muchos casos trabajaremos con la terminal y con ficheros de configuración.
Clases y contenidos
- Estructura del código HTML5.
- Cómo crear un código semántico.
- Accesibilidad (aria roles).
- Cómo construir formularios semánticos y accesibles.
Veremos qué es boilerplate y cómo nos puede facilitar inicializar nuestros proyectos de una forma ágil. También veremos las diferentes alternativas disponibles.
Javascript es el lenguaje que tenemos disponible para el desarrollo de webs o aplicaciones en cliente. Como todo en lenguaje de programación tenemos una serie de buenas prácticas que hará que nuestro código sea más óptimo, más estructurado y siguiendo una serie de convenciones más fácil de leer para otros desarrolladores.
CSS es una parte muy importante en el desarrollo de un site. Hay convenciones que hemos ido adquiriendo para que tengamos unas buenas prácticas y facilitar la estructura de archivos y código. Conoceremos diferentes formas de trabajar con CSS, como OOCSS, SMACSS y BEM.
Los preprocesadores CSS permiten aplicar la lógica de programación, agilizando el desarrollo y las modificaciones de nuestro CSS. Veremos los que tenemos disponibles, cómo integrarlos en nuestros proyectos y ejemplos de uso
En HTML también tenemos disponibles preprocesadores, los cuales nos ofrecen una sintaxis simplificada, incluso estructuras de control para generar nuestro HTML final. Un ejemplo que vemos a diario es Markdown, en los Readme de los repositorios de GitHub.
Nos centraremos en el nueva estandar Javascript ES6 y cómo hacerlo compatible con los navegadores mediante Babel. También conoceremos que es CoffeeScript y TypeScript, así como la influencia que han marcado en la nueva versión de ECMAScript.
En esta sesión veremos esta herramienta para transformar estilos mediante plugins de JavaScript. Esto hará que podamos centrarnos en escribir Vanilla CSS
Analizaremos cómo los linters pueden mejorar nuestro código, desde una perspectiva de buenas prácticas.
Es uno de los puntos más importantes en la experiencia de usuario. Aprenderemos cómo optimizar nuestros proyectos para que sean más rápidos.
Desde su aparición, las developer tools no han dejado de mejorar y facilitarnos las tareas de desarrollo. Veremos cómo sacarle el máximo partido.
Tanto Grunt, como Gulp son gestores de tareas que nos permiten automatizar procesos que repetimos en cada proyecto. Analizaremos los dos más populares.
Haremos un repaso a los plugins más importantes que tenemos disponibles para Grunt y Gulp.
Las imágenes y gráficos son una parte muy importante del contenido de un site, pero igual de importante es saber cómo optimizar ese contenido para que sean lo más ligeras posibles.
Esta librería nos permite escribir código JavaScript del cliente, como si estuviéramos programando en Node.js con módulos.
Con Node.js y su gestor de paquetes npm, veremos qué podemos ejecutar Javascript fuera del navegador. Veremos cómo trabajar con un entorno Node, cómo instalar paquetes y cómo crear nuestro propio paquete.
Webpack es un module bundler (empaquetador de módulos) muy eficiente para webapps, que nos permite la carga, empaquetado, fragmentación del código y compilación a Javascript nativo.
Text Sublime Text es uno de los editores más populares entre los desarrolladores frontend, en esta sesión veremos una serie de TIPS para ser más productivos.
Todo proyecto debería disponer de guías de estilos, esto facilita el desarrollo y futuras funcionalidades. Veremos algunas herramientas para automatizar este proceso.
Aprenderemos las ventajas, la diferencia entre TDD y BDD, cuándo y cómo debemos implementar cada una de ellas.
Daremos un repaso a las principales órdenes de Git, así como ver el uso de Github como herramienta de desarrollo colaborativo.
Frontend Pre-commit Rules y cómo nos ayudan a mejorar la calidad de nuestro código mediante el Linting de Javascript y de SASS.
Valoraciones
Javi Felices
Emilio
¿Conoces nuestra tarifa plana?
Toda la formación de EscuelaIT, con más de 200 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.