WORKSHOP ADA

FRONTEND

Hyper Text Markup Language

Lenguage de marcado de hipertexto

Cascade Style Sheet

Hoja de estilos en cascada

HTML

CSS

JAVASCRIPT

TECNOLOGÍAS WEB

TECNOLOGÍAS WEB

HTML

CSS

JAVASCRIPT

ESTRUCTURA

PRESENTACION

COMPORTAMIENTO

¿Qué hay?

¿Cómo se ve?

¿Qué hace?

  • 👉 Es un archivo de texto con extensión .html
  • 👉 Lenguaje de marcado
  • 👉 Las "marcas" son etiquetas
  • 👉 Las etiquetas son "palabras claves", no podemos inventarlas, hay que usar las que ya existen
  • 👉 Cada etiqueta indica al navegador qué elemento mostrar y con qué contenido
  • 👉 El nombre de la etiqueta se escribe en minúscula, y va encerrada entre los símbolos < y >
<etiqueta>

HTML

 

👉 Hay dos tipos de etiquetas: la cerrada, que tiene una parte de apertura y otra de cierre

<etiqueta></etiqueta>

👉 La etiqueta abierta no tiene una parte de cierre, y se distingue de la cerrada por tener la barra después del nombre

<etiqueta />

👉 La de cierre se distingue de la de apertura porque tiene la barra (/) antes del nombre

HTML - ETIQUETAS

HTML - ETIQUETAS

👉 Las etiquetas cerradas ​pueden contener texto dentro suyo

<p>Hola mundo!</p>

👉 Las etiquetas abiertas no pueden contener ni texto ni otras etiquetas dentro

<etiqueta />

👉 También pueden contener otras etiquetas (anidadas)

<div>
 <p>Soy un párrafo dentro de div!</p>
 <p>Soy otro párrafo dentro de div!</p>
 <p>Soy otro párrafo dentro de div!</p>
</div>

HTML - ATRIBUTOS

👉 Las etiquetas también pueden tener atributos

<etiqueta atributo="valor" />
<etiqueta atributo="valor"></etiqueta>

👉 Un atributo contiene información extra que le podemos agregar a una etiqueta

👉 Se compone de el nombre del atributo y de su valor

👉 Se agrega después del nombre de la etiqueta y antes de que esta cierre

👉 Una etiqueta puede tener varios atributos, pero no un atributo repetido

👉 La sintaxis es nombre de atributo, seguido del signo igual y el valor entre comillas

HTML - ESTRUCTURA BASE

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ada Lovelace</title>
  </head>
  <body>
  </body>
</html>

👉 DOCTYPE le indica al navegador que el tipo de versión de HTML vamos a usar, así sabe que esperar, en este caso, la última versón (HTML5)

👉 html es la etiqueta raíz o troncal que contiene a todas las demás elementas. lang indica el lenguaje principal de la página para que el navegador pueda reconocerlo 

👉 head contiene información extra de la página, no los elementos que vamos a ver en ella. Información como el título de la página y la lista de archivos que tiene que cargar van aquí

👉 body es donde vamos a agregar todos los elementos que se van a mostrar en nuestra página

👉 meta es una etiqueta que nos permite agregar información extra, va siempre dentro de head. charset sirve para decirle al navegador que set de caracteres (latinos, cirílicos, arábigos, etc) vamos a usar

👉 title es el título de la página, es que se ve en el tab y cuando guardamos la página en marcadores

👉 aquí lo que hacemos es definir que el ancho de la página se corresponda al del dispositivo, y que el zoom inicial sea el normal (100%)

<section>, etiqueta cerrada, representa una sección de contenido

<h1>, etiqueta cerrada. Las etiquetas h* representan titulares o encabezados (headings) y se numeran del 1 al 6 (de mayor a menor importancia)

<p>, etiqueta cerrada, representa un párrafo

HTML - ETIQUETAS

CSS - ESTILOS

👉 Para darle estilos a nuestro documento, tenemos que crear un archivo con extensión .css

👉 En nuestro documento html, tenemos que decirle que agregar la siguiente línea dentro de la etiqueta head

<link rel="stylesheet" href="estilos.css" />

👉 link nos permite "linkear" un archivo, con el atributo rel indicamos de que el archivo es una hoja de estilos, y con href indicamos la ruta del archivo que queremos cargar

👉 la ruta es relativa al archivo .html, por lo que si está en la misma carpeta, solo tenemos que poner el nombre

CSS - SINTAXIS

👉 La sintaxis de CSS se compone de selectores, propiedades y valores

👉 Los selectores indican a qué elementos le vamos a cambiar su presentación

👉 Las propiedades indican qué cosas vamos a cambiar de los elementos: color, tamaño, posición, etc

👉 Los valores indican a qué nuevo valor va a tener la propiedad que modificamos: por ejemplo, si modificamos color, podemos tener red, green, blue, etc

CSS - SINTAXIS

👉 Los selectores se ponen uno debajo de otro, después del selector se abre llaves {}, dentro de estas van todas las propiedades que queremos modificar

👉 Dentro de las llaves, en cada línea va una propiedad y un valor, esto se escribe poniendo el nombre de la propiedad, seguido de dos puntos, el valor, y el punto y coma al final de la línea

👉 El punto y coma es muy importante, si no lo colocamos CSS no sabe donde termina la línea, va a generar un error y nuestros estilos no se van a visualizar correctamente

selector {
 propiedad: valor;
 otra-propiedad: otro-valor; 
}

otro-selector {
 propiedad: valor;
}

CSS - SELECTORES

👉 Hay varios tipos de selectores y formas de combinarlos, los que vamos a ver son dos: selector de etiqueta y selector de clase

👉 Un selector de etiqueta se escribe directamente con el nombre de la etiqueta, y se aplica a todas las etiquetas de dicho nombre. El siguiente ejemplo aplica el color rojo a todos los elementos de tipo párrafo

p {
 color: red;
}

CSS - SELECTORES

👉 Una clase es una especie de "nombre" con el que agrupamos un conjunto de estilos

.importante {
 color: red;
}

👉 Un selector de clase se escribe con el nombre de la clase (que puede ser cualquiera) antecedido de un punto 

👉 Podemos asignar la clase a un elemento con el atributo class y poniendo el nombre de la clase como valor de dicho atributo, entre comillas. De esta forma, dicho elemento va a tener los estilos que pertenecen a dicha clase

<h1 class="important">Mi color de texto es rojo</h1>
<p class="important">Mi color de texto es rojo</p>
<h1>Mi color de texto es normal (negro)</h1>
<p>Mi color de texto es normal (negro)</p>

👉 Un elemento puede tener varias clases, y las clases se pueden repetir entre varios elementos.

CSS - PROPIEDADES

👉 font-size cambia el tamaño del texto, puede utilizar valores en pixeles (por ejemplo 14px, 22px)

👉 color cambia el color del texto, podemos usar distintos sistemas como el hexadecimal, el rgb y el hsl

👉 font-weight define el grosor del texto, sus valores posibles van de 100 (más fino) a 900 (más grueso), subiendo de a 100 (200, 300, 400, etc), no todas las tipografías tienen todas las variaciones 

👉 font-family cambia la tipografía del texto, tenemos que definir una tipografía como Helvetica, Arial, etc. 

👉 margin define la distancia (margen, o espacio) que hay entre un elemento y otro, tenemos margin-top (margen superior), margin-right (margen derecho), margin-bottom (margen inferior) y margin-left (margen izquierdo). Puede utilizar valores en pixeles.

👉 background-color cambia el color del fondo, podemos usar distintos sistemas como el hexadecimal, el rgb y el hsl

CSS - PROPIEDADES

👉 height igual que width, pero para el alto

👉 flex-direction cambia la orientación de un contenedor flexible, si su valor es row (fila) sus elementos se van a distribuir en forma horizonal, si es column (columna) se van a distribuir en forma vertical

👉 display: flex convierte un contenedor en un contenedor flexible, lo que le da acceso a nuevas propiedades que le permiten distribuir los elementos que contiene de forma mucho más variada y potente

👉 width define el ancho de un elemento, podemos usar valores en pixeles, en porcentajes o relativo al viewport

👉 justify-content justifica los elementos de un contenedor flexible según su orientación. Uno de sus valores posibles es center, si la dirección es column va a centrar los elementos verticalmente.

👉 max-heigth igual que max-width, pero para el alto

👉 max-width define el máximo ancho que un elemento puede tener

CSS - UNIDADES

👉 % o por ciento, representa una medida en relación al elemento que lo contiene. Por ejemplo, si un elemento con 200px de ancho contiene otro elemento con 50% de ancho, ese elemento tiene 100px. Por defecto, la mayoría de los elementos tiene un ancho de 100%.

👉 px o pixeles, representan un valor fijo que no varía, un elemento va a seguir teniendo la misma medida independientemente del tamaño de la pantalla

👉 vw o viewport width (ancho de la vista o pantalla). 100vw representa el ancho total de la pantalla, por lo que si usamos 50vw vamos a tener un elemento que mida la mitad del ancho de la pantalla

👉 vh o viewport height (alto de la vista o pantalla), es lo mismo que vw pero para el alto

DISEÑO RESPONSIVO

👉 Para esto tenemos varias estrategias, no hay una herramienta única que nos permita hacer todo el trabajo

👉 El diseño responsivo nos permite tener un diseño que se ve bien en todas las resoluciones y pantallas

👉 Parte de estas estrategias consiste en usar elementos con ancho en porcentaje, no en píxeles, porque de lo contrario tendrían siempre el mismo tamaño independientemente del de la pantalla. Esto no quiere decir que todos los elementos deberíamos definirlos así (a veces no queremos que vayan modificándose todo el tiempo), pero sí que es una buena estrategia a considerar. 

👉 Usar contenedores flexibles también es una buena idea, ya que pueden ir adaptando la distribución de sus elementos automáticamente dependiendo del ancho del contenedor

CSS - MEDIA QUERIES

👉 Las media queries son una de las herramientas más poderosas que tenemos a la hora de hacer diseños responsivos

👉 Nos permiten definir reglas a partir de la cual se van a aplicar ciertos estilos. La sintaxis es la siguiente:

@media (regla) {
 /* Estilos aplicar 
  * si la regla se cumple */
}

👉 Una regla posible es definir que los estilos se van a aplicar mientras la pantalla tengan un ancho menor que X pixeles, es decir, se van a aplicar hasta un ancho máximo de la pantalla, por ejemplo

@media (max-width: 1000px) {
 /* Estilos aplicar 
  * si la pantalla tiene 
  * menos de 1000px de ancho */
}

CSS - MEDIA QUERIES

👉 Esta resolución a partir de la cual cambian los estilos se llama breakpoint (punto de quiebre)

👉 Podemos definir varios media queries. Por ejemplo, en el siguiente caso, mientras la pantalla tiene:

h1 {
  font-size: 120px;
}

@media (max-width: 1000px) {
  h1 {
    font-size: 100px;
  }
}

@media (max-width: 500px) {
  h1 {
    font-size: 60px;
  }
}
  • menos de 500px de ancho, h1 va a tener 60px de tamaño,
  • más de 500px y menos de 1000px de ancho, h1 va a tener 100px de tamaño
  • más de 1000px de ancho, h1 va a tener 120px de tamaño

MODO OSCURO

👉 Vamos a agregarle a nuestra página la funcionalidad de modo oscuro. Para eso necesitamos tres cosas:

  • un botón con el que podamos interactuar para poder cambiar de modo (HTML)
  • que al estar en modo oscuro cambien los estilos (CSS)
  • que el botón efectivamente alterne entre modo oscuro y claro al clickearlo (JavaScript)

MODO OSCURO - BOTON

👉 Un botón se define con la etiqueta <button>, que es una etiqueta cerrada

👉 La etiqueta necesita el atributo type="button" para indicarle que es un botón común y no va a tener otra responsabilidad

👉 Como nuestro botón no va a tener texto, tenemos que definir el atributo aria-label. Este atributo mejora la accesibilidad de nuestros elementos, y permite que personas con dificultades visuales y que utilicen lectores de pantalla (programas que van describiendo lo que se ve en una pantalla) sepan qué hace nuestro botón

<button type="button" aria-label="Cambiar modo" id="switch-modo">
</button>

👉 También vamos a agregarlo el atributo id. Este atributo permite darle un "nombre" único a nuestro elemento (ningún otro elemento puede tener el mismo id), una forma de identificarlo al respecto de los otros. Esto nos va a ayudar a la hora de darle funcionalidad

MODO OSCURO - ICONOS

👉 Un botón por defecto no tiene ningún contenido, así que vamos a agregarle íconos. Para eso vamos a agregarle una librería de íconos, que nos va a permitir seleccionar los íconos que queramos de un muestrario

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />

👉 Para incluir la librería de íconos FontAwesome, necesitamos agregar dentro del head de nuestra página el siguiente link, antes de nuestro link de css

👉 Dentro de la página de https://fontawesome.com/icons/ podemos buscar los íconos que nos gusten. Vamos a buscar los que se llaman sun y moon. Para utilizarlos, tenemos que entrar a ellos y copiar el html que está debajo de su nombre. Vamos a incluir estos iconos dentro de nuestro botón.

<button type="button" aria-label="Cambiar modo" id="switch-modo">
  <i class="far fa-sun"></i>
  <i class="fas fa-moon"></i>
</button>

MODO OSCURO - ESTILOS

👉 Ahora que ya tenemos nuestro botón con sus respectivos iconos, tenemos que hacer que se vea un poco mejor

👉 Para sacarle los estilos por defecto al botón, tenemos que ponerle border: 0 y background-color: transparent

👉 Los iconos se comportan como si fueran caracteres (lo son, de hecho), por los que podemos cambiarle el color, el tamaño de letra, etc

👉 Para posicionar el botón, vamos a usar la propiedad position: fixed. Esto hace que el botón quede por encima del resto del contenido (en una capa superior) y siempre en la mismo posición (fijo). Esta propiedad nos permite utilizar las propiedades de posicionamient top, right, bottom y left (arriba, derecha, abajo e izquierda) que indican cuánto se corre el elemento desde dicho borde de la pantalla (right: 20px está corrido 20px desde el borde derecho)

👉 Para ocultar el icono del sol, tenemos que usar la propiedad display: none, y como tenemos dos iconos, utilizar el selector de clase

MODO OSCURO

👉 Hora de agregarle funcionalidad a nuestro botón. Para eso, vamos a tener que usar JavaScript. Primero necesitamos crear un nuevo archivo al que llamaremos script.js (tenemos que crearlo en la misma carpeta que index.html y estilos.css)

👉 Al igual que los archivos de CSS, tenemos que decirle a nuestro documento HTML que cargue nuestro script de JavaScript. A diferencia de las hojas de estilo, no usamos la etiqueta link, sino la etiqueta script

👉 La etiqueta <script> es una etiqueta cerrada, y en vez de href utiliza src (source, fuente u origen) para indicar cuál es el script que queremos cargar

<script src="script.js"></script>

👉 También tenemos que agregarla dentro de la etiqueta head

MODO OSCURO

👉 Dentro de nuestro archivo .js vamos a empezar a escribir nuestro código de JavaScript

👉 En JavaScript (y en otros lenguajes de programación) tenemos funciones, que son un conjunto de instrucciones que el programa tiene que ejecutar en orden, en un momento dado

👉 Las funciones pueden tener un nombre, y se escriben de la siguiente forma:

function nombreFuncion() {
  // instrucciones a ejecutar
}

👉 La forma "rara" de escribir el nombre de la función es una convención que se denomina camelCase. Consiste en poner todas las palabras juntas, todas las palabras empiezan con la primera letra en mayúsculas, excepto la primera

MODO OSCURO

👉 Vamos a definir dos funciones, la primera va a ser la siguiente:

function alternarModo() {
  document.body.classList.toggle("modo-oscuro")
}

👉 Lo que hace esta función es alternar ("toggle") la clase "modo-oscuro" en el body, para eso ejecuta los siguientes pasos:

  • selecciona document, el documento html que contiene todos los demás elementos
  • selecciona el body de document
  • accede a la lista de clases de body con classList
  • llama a la función toggle de classList, con el valor "modo-oscuro"

👉 toggle alterna una clase en un elemento, si la clase se encuentra en el mismo la remueve y si no la agrega

MODO OSCURO

👉 La próxima función la siguiente:

function inicializar() {
  const boton = document.getElementById("switch-modo")
  boton.onclick = alternarModo
}

👉 Esta función se va a ejecutar cuando se inicialice la página. Lo que hace es lo siguiente:

  • selecciona document y busca el elemento con id "switch-modo" (nuestro botón en el mismo
  • dicho botón lo guarda en la variable boton​
    • una variable es una especie de caja o contenedor donde podemos almacenar datos e información
    • se declara con la palabra reservada const seguida de su nombre (también en camelCase)
    • para asignarle valores tenemos que poner el operador de asignación = después del nombre

MODO OSCURO

👉 La próxima función la siguiente:

function inicializar() {
  const boton = document.getElementById("switch-modo")
  boton.onclick = alternarModo
}

👉 Esta función se va a ejecutar cuando se inicialice la página. Lo que hace es lo siguiente:

  • una vez que tenemos una variable con un nombre, podemos utilizarla escribiendo directamente el nombre. Cuando lo hacemos, JavaScript "busca" lo que hay guardado dentro de ella para poder utilizarlo.
  • en la línea 3, al botón que está guardado en nuestra variable boton, le asignamos la función alternarModo en su evento de click
  • por lo tanto, cada vez que se haga click en dicho botón, se va a invocar la función alternarModo, que va a ejecutar las instrucciones que le definimos
  • es decir, cada vez que hagamos click en el botón, se va a alternar la clase "modo-oscuro" en el body

MODO OSCURO

👉 El código final nos queda:

function alternarModo() {
  document.body.classList.toggle("modo-oscuro")
}

function inicializar() {
  const boton = document.getElementById("switch-modo")
  boton.onclick = alternarModo
}

window.onload = inicializar

👉 La última línea se encarga de asignarle la función inicializar al evento de carga de la página, cuando esta se cargue se va a invocar dicha función y ejecutar sus instrucciones

MODO OSCURO

👉 JavaScript lee el código de la siguiente forma:

function alternarModo() {
  document.body.classList.toggle("modo-oscuro")
}

function inicializar() {
  const boton = document.getElementById("switch-modo")
  boton.onclick = alternarModo
}

window.onload = inicializar

👉 Crea la función alternarModo (no la ejecuta todavía)

👉 Crea la función inicializar (no la ejecuta todavía)

👉 Asigna la función inicializar al evento de carga de la página

👉 Cuando se carga la página, se ejecuta la función inicializar

👉 Buscar el elemento con id "switch-modo" y lo guarda en la variable boton

👉 Le asigna la función alternarModo al evento de click del botón

👉 Cuando se hace click en el botón con id "switch-modo", se ejecuta la función alternarModo

👉 Se alterna el body la clase "modo-oscuro", si no está la agrega, de lo contrario la elimina

MODO OSCURO - ESTILOS

👉 Ahora que tenemos nuestro body puede tener la clase "modo-oscuro", podemos definir los estilos que se van a aplicar cuando body tenga dicha clase, para esto vamos a aprovechar los selectores de clase

👉 Los selectores de clase tienen más especificidad que los de etiqueta, les "ganan" a estos porque tienen mayor prioridad, por ejemplo:

body {
  background-color: white;
}

.modo-oscuro {
  background-color: black;
}

👉 En este caso, si bien estamos apuntando al mismo elemento y modificando la misma propiedad, cuando body tiene la clase "modo-oscuro", el selector de clase tiene prioridad por sobre el de etiqueta, por lo que se va a aplicar el estilo del selector con mayor prioridad, en este caso, el fondo negro

MODO OSCURO - ESTILOS

👉 Eso nos sirve solamente para el body, pero ¿cómo podemos modificar los estilos de los demás elementos sólo cuando el body tenga la clase modo-oscuro?

👉 Para eso vamos a necesitar usar selectores descendientes. Un selector descendiente se define combinando varios selectores (de etiqueta, de clase) separados por espacio, por ejemplo, en el siguiente caso:

selectorA selectorB selectorC {
  /* estilos */
}

👉 dichos estilos se aplican a todo selectorC que esté dentro de un selectorB que esté dentro de un selectorA, independientemente de cuán dentro esté.

👉 en el siguiente caso, los estilos se vana aplicar a todo elemento p que esté dentro de un elemento con clase modo-oscuro

.modo-oscuro p {
  /* estilos */
}

MODO OSCURO - ESTILOS

👉 El código para cambiar los estilos del modo oscuro nos queda de la siguiente forma:

.modo-oscuro {
  background-color: #212121;
}

.modo-oscuro .fa-sun {
  display: block;
}

.modo-oscuro .fa-moon {
  display: none;
}

.modo-oscuro p {
  color: #fefefe;
}

👉 Lo que hacemos es cambiarle el color del fondo al body, mostrar el icono del sol, ocultar el de la luna, y cambiarle el color al texto

MODO OSCURO - ESTILOS

👉 Una última cosa que podemos hacer es la siguiente:

* {
  transition: .3s;
}

👉 El selector * es el selector universal, se aplica a todos los elementos de la página

👉 transition es una propiedad que le asigna a los elementos la capacidad de transicionar: cuando un elemento cambia los valores de sus propiedades (por ejemplo, el color de fondo), en vez de hacerlo bruscamente, de un momento a otro, va a realizar el cambio de forma gradual. El valor de transition (.3s) es cuánto dura esa transición

¡Ya tenés tu primera página hecha y diste tus primeros pasos como desarrolladora frontend!

¡FELICITACIONES!

👏🎉👏🎉👏

Hay un mundo enorme por seguir descubriendo, ¡te esperamos!

Workshop Frontend Ada 2020

By Pablo Hoc

Made with Slides.com

Workshop Frontend Ada 2020

  • 565

More from Pablo Hoc