Frontend Training

Introducción

Arquitectura Tradicional

Se construye el HTML en el servidor y se devuelve todo el documento con los datos requeridos. La lógica de negocios y de presentación están acopladas

Arquitectura Tradicional

Si se quiere, por ejemplo, agregar un dispositivo móvil se debe duplicar en otra Web App la lógica de negocios para que pueda ser interpretada por el nuevo dispositivo

Arquitectura API RESTful

Arquitectura API RESTful

Escalable para multiples dispositivos

HTML (HyperText Markup Language)

El HTML es un lenguaje de marcado (markup language) que sirve para darle estructura y contenido a una aplicación web.

HTML no es un lenguaje de programación, ya que este no tiene funciones aritméticas o variables, digamos que no poseen lógica. Ejemplo P, IMG.

CSS (Cascading Style Sheets)

CSS permite separar el contenido de un documento de su presentación.

La presentación incluye aspectos como el diseño o disposición de los elementos HTML, colores y fuentes.

BROWSER

Tanto HTML como CSS son reproducidos por el navegador, por lo que no necesitamos levantar ningun tipo de servidor para poder trabajar con ellos.

DOM (Document Object Model)

Provee una representación estructural del documento y define una forma de accederlo y modificar la estructura, contenido y estilos del documento, esencialmente conecta la página web con scripts o lenguajes de programación

Partes de un Tag HTML

Escenario Básico

Conexión HTML-CSS

Inline

Usando el atributo style dentro del tag. En este caso todo los estilos CSS son escritos dentro de este atributo. Esta forma de asignar estilos es considerada una mala práctica

ID

Se asocia el elemento con un id único para ese tag. Luego se definen los estilos que van a estar asociados a ese id

Class

Es muy parecido al id solo que en este caso se útiliza el atributo class. Esta clase puede ser reutilizada las veces que se quiera en distintos elementos HTML

Tag style

Dentro de este tag se podrá escribir código CSS que será interpretado por el navegador para darle estilos a los tags HTML que contengan las clases o ids especificados. La utilización de tags style es considerada una mala práctica

Tag link

El tag link nos permitirá importar archivos css externos, pudiendo tener por separado el CSS del HTML. Este buena práctica reemplazaría al tag style

Multiples Classes

El atributo class puede contener multiples clases, procesando las propiedades de ambas