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

Arquitectura Frontend

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.

Acelera tu carrera profesional

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.

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

Carlos Azaustre

Carlos Azaustre

CTO en Chefly

@carlosazaustre
Ignacio Anaya

Ignacio Anaya

Fullstack Developer en E-xact

@ianaya89
Rulótico González

Rulótico González

Co Founder en Sable Digital Studio

@rulotico
Michael Posso

Michael Posso

Web Developer en Oracle

@micposso
Wilson Sánchez

Wilson Sánchez

User Experience Lead en Laureate Education

@daywalkerhn
Richard Kaufman

Richard Kaufman

Ingeniero Frontend en Kickass Partners

@sparragus
Eduardo Álvarez

Eduardo Álvarez

Backend Developer en Platzi

@walis85300
Leonidas Esteban

Leonidas Esteban

Frontend Chapter Lead en Grow

@LeonidasEsteban
Sacha Lifszyc

Sacha Lifszyc

JavaScript FullstackDeveloper en Restorando

@sachalifs
Nicolas Molina

Nicolas Molina

Google Developer Expert en Google

@nicobytes
Daniel Martínez

Daniel Martínez

Senior Frontend Architect en Hawkeu

@Wakkos
Víctor Yoalli Domínguez

Víctor Yoalli Domínguez

CEO en Viento Digital

@victoryoalli
Ricardo Celis

Ricardo Celis

Course Director en Platzi

@celismx
Oscar Barajas Tavares

Oscar Barajas Tavares

Foundation Layer en Platzi

@gndx
Diego De Granda

Diego De Granda

Foundation Layer y Frontend Engineer Mentor en Platzi

@degranda10
Freddy Vega

Freddy Vega

CEO en Platzi

@freddier

Rutas relacionadas para complementar tu aprendizaje

Frontend con Angular

Frontend con Angular

Desarrolla aplicaciones web y móviles con Angular, el framework más usado en el mundo para el desarrollo de apps.
Desarrollo Web Frontend con Vue.js

Desarrollo Web Frontend con Vue.js

Framework progresivo de Javascript para crear interfaces de forma sencilla y escalable para desarrollar aplicaciones web con diferentes grados de complejidad.
Frontend con React.js

Frontend con React.js

Aprende a desarrollar aplicaciones web, móviles y de escritorio con React.js. La librería JavaScript más popular en el mercado.