por UX despegar
Frontend
Es un conjunto de tecnologías que funcionan del lado del cliente.
¿Qué es Frontend?
Es un lenguaje basado en etiquetas y atributos que nos permiten estructurar contenido.
¿Qué es HTML?
Es un lenguaje de estilo que define la presentación de los documentos HTML.
¿Qué es CSS?
Es un lenguaje de programación que permite crear acciones en las aplicaciones web.
¿Qué es Javascript?
Términos comunes en HTML
Elemento
Los elementos son designadores que definen la estructura y el contenido de los objetos dentro de una página.
Etiqueta
Las etiquetas son elementos encerrados entre los signos de < y > (mayor y menor).
Atributo
Los atributos son propiedades que se utilizan para proporcionar información adicional acerca de un elemento.
Anatomía de una etiqueta
Estructura del documento
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hola Mundo</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Esto es un ejemplo</p>
</body>
</html>Etiquetas autocontenidas
-
<br>
-
<img>
-
<meta>
-
<embed>
-
<input>
-
<param>
-
<hr>
-
<link>
-
<source>
Atributos más comunes
id
src
class
href
title
type
Semántica
La semántica en HTML se refiere a la forma correcta de usar cada elemento para lo que fue pensado.
<p>
<h1>
<div>
<a>
<ul>
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
Nuevos elementos
Términos comunes en CSS
Selector
Los selectores indican a que elementos dentro de la pagina deben aplicarse determinados estilos.
Propiedad
Las propiedades indican exactamente que tipo de estilo se le aplica a un elemento.
Valor
Los valores son los encargados de asignarle un comportamiento a las propiedades.
Anatomía de un selector
Tipos de selectores
Selector de id
Selector de clase
Selector de atributos
#price {
color: green;
}.price {
color: green;
}[type=text] {
color: green;
}Tipos de selectores
Selector combinado
#price.price[type=text] {
color: green;
}Selector anidado
#price .price {
color: green;
}Selector multiple
#price, .price {
color: green;
}Elementos en línea y bloques
En línea
Bloques
Referenciando al CSS
<head>
<link rel="stylesheet" href="style.css">
</head>Una buena práctica es tener todo el código css en un archivo externo e incluirlo con el tag link dentro del <head> de nuestro documento
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
Nuevas características
Bordes
Sombras
Transiciones
Selectores
Media Queries
Herramientas
Grillas
Las grillas son un sistema basado en columnas que nos permiten darle una consistencia a la estructura de nuestro sitio y ordenar los elementos de una forma sencilla.
Grillas de 12 columnas
1
2
3
4
6
12
Grillas de 12 columnas
8 columnas
4 columnas
3 columnas
Grillas de 12 columnas
<div class="grid">
<div class="col-8">
<!-- contenido -->
</div>
<div class="col-4">
<!-- contenido -->
</div>
</div>
<div class="grid">
<div class="col-3">
<!-- contenido -->
</div>
<div class="col-3">
<!-- contenido -->
</div>
<div class="col-3">
<!-- contenido -->
</div>
<div class="col-3">
<!-- contenido -->
</div>
</div>Grillas responsive
Son sistemas de grillas que poseen una lógica basada en breakpoints que adapta la cantidad de columnas asignadas a un elemento dependiendo de la resolución de la pantalla.
Grillas responsive
0 a 767px
small
768px a 1023px
medium
1024px o más
large
Breakpoints
Grillas responsive
Grillas responsive
Grillas responsive
<div class="grid">
<div class="col-12-small col-8-medium col-8-large">
<!-- contenido -->
</div>
<div class="col-12-small col-4-medium col-4-large">
<!-- contenido -->
</div>
</div>
<div class="grid">
<div class="col-6-small col-3-medium col-3-large">
<!-- contenido -->
</div>
<div class="col-6-small col-3-medium col-3-large">
<!-- contenido -->
</div>
<div class="col-6-small col-3-medium col-3-large">
<!-- contenido -->
</div>
<div class="col-6-small col-3-medium col-3-large">
<!-- contenido -->
</div>
</div>Preguntas
¡Gracias!
Frontend
By UX Despegar
Frontend
Lean UX - Universidad de Palermo
