Lleva tu carrera a otro nivel por menos de 1 dólar al día.

Arquitectura Frontend
Ruta de aprendizaje

Arquitectura Frontend

Crea sitios web desde cero con una interfaz gráfica dinámica y atractiva en el navegador y dispositivos móviles, aplicando HTML, CSS y Javascript.
Aprende las habilidades necesarias para diseñar, crear y mantener sitios web, trabaja en empresas o crea páginas para clientes de forma independiente.
Crea sitios web desde cero con una interfaz gráfica dinámica y atractiva en el navegador y dispositivos móviles, aplicando HTML, CSS y Javascript.
Las bases de HTML, CSS y Javascript

Las bases de HTML, CSS y Javascript

Básico
Básico
Curso de HTML y CSS

Curso de HTML y CSS

Curso de Desarrollo Web Online

Curso de Desarrollo Web Online

Curso de Responsive Design

Curso de Responsive Design

Curso de CSS Grid Layout

Curso de CSS Grid Layout

Fundamentos de JavaScript

Fundamentos de JavaScript

Curso de jQuery a JavaScript

Curso de jQuery a JavaScript

Curso profesional de Git y GitHub

Curso profesional de Git y GitHub

Preprocesadores y Frameworks de CSS

Preprocesadores y Frameworks de CSS

Intermedio
Intermedio
Curso de Sass

Curso de Sass

Curso de PostCSS

Curso de PostCSS

Curso de Less

Curso de Less

Curso de Stylus

Curso de Stylus

Curso de Bootstrap

Curso de Bootstrap

Curso de Sistemas de Diseño para Desarrolladores

Curso de Sistemas de Diseño para Desarrolladores

Curso de Animaciones para la Web

Curso de Animaciones para la Web

Frameworks de Javascript y Testing

Frameworks de Javascript y Testing

Avanzado
Avanzado
Curso de React.js

Curso de React.js

Curso básico de Vue.js

Curso básico de Vue.js

Curso de Angular 6

Curso de Angular 6

Curso de JavaScript Testing con Jest

Curso de JavaScript Testing con Jest

Curso de Unit Testing para MEAN con Jasmine

Curso de Unit Testing para MEAN con Jasmine

Curso de WPO: Optimización de Carga de Sitios Web

Curso de WPO: Optimización de Carga de Sitios Web

Los superpoderes de un desarrollador Frontend

Parte de la labor de ser un desarrollador Frontend es aplicar diferentes técnicas y tecnologías para llevar a cabo una UI y UX deseados. Entre sus responsabilidades están hacer que los usuarios accedan fácilmente al contenido de un sitio web, elegir las etiquetas de HTML correctas para describir ese contenido y garantizar que el contenido va a tardar el mínimo tiempo posible en mostrarse. Además, en un entorno de trabajo ideal, un desarrollador Frontend analiza las maquetas de una página web realizadas por un diseñador gráfico y las interpreta en bloques de código y técnicas para lograr un producto similar al planeado.

¿Cómo piensa un arquitecto Frontend?

Pongamos de ejemplo el siguiente diseño de un sitio web:

Es un diseño bastante atractivo y hay muchas cosas que pensar desde el punto de vista del diseño web y desarrollo Frontend.

1. El Layout se construye con CSS Grid

CSS Grid es un sistema de layout en dos dimensiones, esto quiere decir que puede manejar columnas y filas. En el diseño de ejemplo, podemos notar que el Layout de ese sitio se puede crear perfectamente con este sistema ya que está conformado por tres columnas y tres filas. Esto expresado en código quedaría de la siguiente manera:

.Layout { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, auto); }

2. El menú utiliza flexbox

A diferencia de CSS Grid, flexbox es un sistema de layout de una sola dirección. Es decir, sólo puede manejar filas o columnas pero no ambas al tiempo. Algo que debemos recordar es que CSS Grid y flexbox pueden convivir amenamente entre sí. En este caso, como se mencionó en el paso anterior la grilla está hecha con CSS Grid, pero el menú, al ser unidireccional puede implementarse sencillamente con flexbox.

.Menu { display: flex; justify-content: space-between; }

3. El fondo está hecho con un gradiente

Cómo podemos ver en la imagen el fondo está compuesto de dos colores, aproximadamente un 30% de la parte superior es color negro y el resto color gris, para agregar este efecto vamos a utilizar un gradiente.

Un gradiente es una imagen que consiste en una transición progresiva de dos o más colores, es por eso que queda perfecto con nuestro ejemplo, pues a pesar de que los colores de fondo no muestran una transición progresiva, definiendo el punto de inicio y fin de un color en un mismo punto lograremos este efecto.

El código quedaría más o menos de la siguiente forma:

.Background { background-image: linear-gradient(black 0%, black 30%, gray 30%, gray 100%); }

¿Qué responsabilidades debe enfrentar un arquitecto Frontend?

El desarrollo Frontend es fácil de aprender pero difícil de dominar. Hay mucho más que HTML y CSS. A continuación se enlistan algunas responsabilidades a las que se enfrenta en su día a día además de maquetar.

1. El rendimiento de un sitio web está en sus manos.

Es cierto que una pequeña parte de la responsabilidad a la hora de que una página web carga corresponde al desarrollador Backend. Pero una vez que el HTML es recibido, el resto de tiempo de carga es una preocupación que recae en el Frontend. Qué y cuántos recursos se cargan, que tan optimizados están, la forma en la que se cargan, etc.

2. Son el puente entre los diseñadores y desarrolladores Backend

Un desarrollador Frontend está en medio de todo, es la intersección de muchas disciplinas. Son responsables del diseño y de cómo se ve el sitio, garantizándole a los usuarios que tienen lo que necesitan y manejando sus peticiones para que lleguen al Backend.

3. Tiene que lidiar con Frameworks, librerías, pre-procesadores y dependencias

Antes, unir una hoja de estilo y un archivo de JavaScript en el HTML era todo lo que se necesitaba para construir un sitio web, pero hoy en día eso sólo es la base. **

Actualmente existen muchísimas más herramientas como librerías, frameworks, dependencias de terceros que podemos integrar en nuestros proyectos.**

Cada día se agregan más y más opciones y es la responsabilidad de un desarrollador Frontend saber cuáles son las mejores herramientas que ayudarán a escalar el proyecto a futuro.

¿Te gustaría dominar todo esto y aprender a pensar como un arquitecto Frontend? Esta ruta de aprendizaje te guiará por el camino necesario para que puedas obtener todos las habilidades necesarias para lograrlo.

Glosario

Glosario

HTML: lenguaje de marcado para la elaboración de páginas web. HyperText Markup Language (lenguaje de marcas de hipertexto) por sus siglas en ingles.

DOM: El DOM (Document Objet Model por sus siglas en inglés) es la estructura de objetos generada por el navegador al cargar un documento que puede ser modificada mediante un lenguaje de programación para cambiar dinámicamente los contenidos y aspecto de la página.

JavaScript: JavaScript (abreviado comúnmente JS) es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, es basado en prototipos, imperativo, débilmente tipado y dinámico.

Navegador: Un navegador es una aplicación de software que es usada para visitar sitios web. Firefox, Internet Explorer, Safari, etc.

Semántica: En la web, semántica significa elegir las etiquetas HTML correctas para describir el contenido. Por ejemplo, usar etiquetas de tabla para diseñar un sitio no es muy semántico porque esas etiquetas no transmiten ningún significado al contenido que contienen.

CSS: Del inglés Cascading Style Sheets (hojas de estilo en cascada). Es un archivo que termina en .css que está vinculado desde el HTML y que controla el aspecto de la página web.

Framework: Serie de herramientas/librerias de programacion con un proposito especifico

Hover: Cuando el cursor del mouse se desplaza sobre un enlace y ese enlace cambia de color se trata del estado "hover".

Frontend: Con este término se identifica al conjunto de tecnologías que dan estructura, apariencia y comportamientos de interactividad a los sitios y aplicaciones web modernas de cara a los clientes o usuarios finales en un navegador.

Layout: Es el lienzo y forma en la que cada elemento está situado dentro de un sitio web.

Aprende de los mejores

Daniel Martínez

Daniel Martínez

Senior Frontend Architect en Madaísh

@Wakkos
Richard Kaufman

Richard Kaufman

Ingeniero Frontend en Kickass Partners

@sparragus
Freddy Vega

Freddy Vega

CEO en Platzi

@freddier
Sacha Lifszyc

Sacha Lifszyc

JavaScript FullstackDeveloper en Restorando

@sachalifs
Eduardo Ibarra

Eduardo Ibarra

CEO en http://multitut.com/

@iBar_Ed
Rulótico González

Rulótico González

Co Founder en Sable Digital Studio

@rulotico

Rutas relacionadas para complementar tu aprendizaje

Desarrollo con Vue.js
Ruta de aprendizaje

Desarrollo con Vue.js

Intermedio
Framework progresivo de Javascript para crear interfaces de forma sencilla y escalable para desarrollar aplicaciones web con diferentes grados de complejidad.
Desarrollo con Angular
Ruta de aprendizaje

Desarrollo con Angular

Intermedio
Desarrolla aplicaciones web y móviles con Angular, el framework más usado en el mundo para el desarrollo de apps.
Frontend con React.js
Ruta de aprendizaje

Frontend con React.js

Intermedio
Aprende a desarrollar aplicaciones web, mobile y de escritorio con React.js, la librería JavaScript más popular en el mercado.

¿Qué estás esperando?

Empieza a estudiar ahora y asegura tu futuro