PRESENTACIÓN
AREA
FRONTEND

The team!!!

Brian Cortes Almonacid

Luis Villalobos

Andres Hernandez

Andres Alarcon

Jonathan Rojas

Miguel Martínez

front-end

developer

browser

html

css

javascript

Cómo funciona la Web

Los clientes y servidores

¿Qué es HTML?

¿Qué es CSS?

¿Qué es JavaScript?

API'S

Class List

DataSet

DOM

Drag And Drop

EventSource

Geolocalización

Historial

Indexed DB

Local Storage

MatchMedia

Microdata DOM API

Request Animation Frame

Web Workers

WebGL

Web Sockets

El Mundo De Las Imagenes

GIF

JPEG

PNG

SVG

✨ Animaciones ✨

Tipos de animaciones web

Animaciones con SVG

CSS Animations

Canvas Animations

Animaciones 3D
😎

Herramientas

Control de Versiones

¿ Cómo Funciona ?

Code Review

Crossbrowsing

💚 Evergreen 💚

Recursos

¿Que necesitamos como desarrolladores fronts?

Diseño🕶

Backend👓

Comunicación💬

Atomic Design

Atoms
Molecules
Organisms
Templates
Pages

Reusability

Easier to create style guide

Easy to understand layout

Code is more consistent

More efficient process, quicker prototyping

Easier to update and remove parts of the site

Client side rendering (Dinámicas)

Server side rendering (Estáticas)

REST

Importancia de un API definido a principios de desarrollo

Vocabulario

  • Cliente
  • Servidor
  • HTTP
  • Request
  • Response
  • API

    • Tipos de páginas web

  • Estáticas
  • Dinámicas (Single page applications)
  • Isomórficas

    • Estáticas

    Ventajas

  • Carga rápida
  • Desarrollo rápido
  • Amigables con el SEO

    • Desventajas

  • Carga una y otra vez
  • Poca o nula interactividad

    • Dinámicas

    Ventajas

  • Enfocadas en el usuario
  • Rápidas

    • Desventajas

  • Primera carga es lenta
  • Mas tiempo de desarrollo
  • Sin el uso de herramientas como Prerender.io no son amigables con el SEO

    • Isomórficas

    REST

    Por qué necesitamos un API definido a principios de desarrollo?

    Pruebas

    ❤️¿Por qué amamos ser Fronts?❤️


    THANKS!

    💋 BEBESES 💋