Desarrollo front end VS.

desarrollo backend

El desarrollo front end va a tener interacción con el usuario, ya que la idea

es que recreemos una interfaz determinada, a partir de un diseño (HTML y
CSS), y utilizar lógica para las funcionalidades que requiera nuestra web
(Javascript). En esta lógica podemos interactuar con el backend.

¿Qué es el backend? Para explicarlo sencillamente podemos decir que es

el sector se encarga de las bases de datos y almacenamiento de datos.

Ejemplo:
En un formulario de registro el equipo frontend va a crear un formulario
visualmente, siguiendo los parámetros del diseño, cuando el usuario
complete este formulario y lo envíe, vamos a “enviar” esos datos al
backend y ellos lo van a almacenar. Gracias a eso, nosotros vamos a
poder acceder a esa información en otras instancias de nuestra
aplicación (web o mobile)

¿Entonces qué hacemos con HTML y CSS?

Maquetar!!
La respuesta a la pregunta “¿qué es maquetar?”

Es componer gráficamente nuestra web, creando elementos con un

contenido determinado, distribuyendolos y dando estilos para recrear un
diseño (creado, en general, por un diseñador gráfico o web)

¿QUÉ ES HTML?
Sus siglas significan: HyperText Markup Language (‘lenguaje de marcado
de hipertexto’)

Es un lenguaje de marcado para elaborar una página web

¿Qué es un lenguaje de marcado? La codificación de un documento que

además del contenido nos indica a través de etiquetas la estructura o
presentación que tendrá ese contenido.

Ejemplo: <h1>Mi título</h1> → estoy indicando que el texto “Mi título” va a

ser un header 1, que para HTML es un título principal

¿QUÉ ES CSS?
Sus siglas significan Cascading Style Sheets, en español, Hoja de estilo en
cascada.

Es un lenguaje de estilos que permite dar un diseño personalizado a

nuestra web.

HTML va a ser el esqueleto de nuestra web, mientras que con CSS vamos a
darle estilos a ese esqueleto permitiendo llevar a cabo un diseño
determinado para completar lo visual en nuestra web.

¿QUÉ ES HTML5?
Es la versión 5 de HTML Que trajo algunos cambios:

El cambio más importante es el de crear una web semántica.

Esto significa que se introdujeron nuevas etiquetas, que en la mayoría de

los casos, cumplen la misma función que una etiqueta DIV o SPAN, pero
que especifican en su nombre cuál será su contenido. EJEMPLO:
<div></div> → <nav></nav> cuando hagamos una barra de navegación,
en vez de usar un div, usamos la etiqueta nav y de esa manera
describiremos en la etiqueta nuestro contenido, para mayor comodidad
de nosotros como desarrolladores, nuestros compañeros, buscadores y
lectores de pantalla.

SINTAXIS
Son reglas que van a determinar que un documento HTML está escrito
correctamente, es decir, que seguimos una secuencia determinada de los
elementos.

<p>Contenido</p> → etiqueta de apertura + contenido + etiqueta de cierre

<img /> → este elemento no tiene contenido (definimos qué imagen será
con su atributo source, pero no tenemos contenido) por lo tanto cerramos
la etiqueta en la misma etiqueta de apertura

ATRIBUTOS
Los elementos tienen ciertos atributos que configuran cómo será el
comportamiento de ese elemento.

Principales etiquetas de HTML

<h1></h1> (hasta h6) headers → títulos/subtítulos

<p></p> → párrafo

<img src=(acá indico url de la foto o ruta dentro de mi pc)/> → imagen

<div></div> → contenedor - en bloque

<ol></ol> → listas ordenadas

<ul></ul> → listas desordenadas

<li></li> → determinan los elementos a listar dentro de ol o ul

<span></span> → contenedor - en línea

<strong></strong> → negrita

<i></i> → cursiva

<a></a> → link
<hr/> → semánticamente representa cambio de tema entre párrafos →
representado por una línea

<br> → salto de línea

Etiquetas semánticas de HTML

Ayudan a definir la estructura del archivo, y a que nuestra web sea mejor
INDEXADA por los buscadores.
Para que la etiqueta sea semántica nos tiene que indicar de qué se trata
su contenido.
Header → introducción del elemento que la contiene -> si lo pongo en el
body va a dar una introducción de que se trata la web. Si lo pongo dentro
de una sección, la introducción de esa sección
Section → agrupa un tema en común
Article → unidad de contenido
Web de recetas → una sección de recetas vegetarianas estaría englobado
en una etiqueta section. Cada receta podría englobarse en un article
Nav → contiene la barra de navegación
Aside → para contenido menos importante que el de la página misma
(otras noticias)
Footer → Final de la página con datos de la web
iframe

Iframe
Permite poner un fragmento de html dentro de esta etiqueta.

Atributos:
src → link al “pedacito” de html que deseamos se vea en nuestra web
allowfullscreen → permite la pantalla completa
importance → prioridad de descarga frente a otros elementos
name

ELEMENTOS EN BLOQUE Y EN LÍNEA

Elemento en línea → ocupa el espacio mínimo necesario en horizontal, y
permite que otro elemento se ponga al lado.

Elemento en bloque → ocupa todo el ancho disponible y no permite que

otro elemento se coloque a su lado, aunque a la vista parezca que tendría
lugar suficiente para que entre otro elemento
ETIQUETAS META
Son etiquetas que se agregan al head del archivo HTML → no generan
ningún cambio visible al usuario de la página web pero indican
información importante para los bots (buscadores/lectores de pantalla)

¿CÓMO ESTILAR?
Estilo en línea → usar atributo style en cada etiqueta

Lo negativo es que es muy repetitivo. En cada etiqueta tendremos que

poner estilos que, quizá ya escribimos en otras etiquetas similares.
Ejemplo:

<p style=”color: red”></p>

<p style=”color: red”></p>

<p style=”color: red”></p>

Etiqueta style dentro de head → vamos a poder usar CSS con la etiqueta
style

<style>

p{

color: red

</style>

Positivo: puedo usar CSS → ahorro código

Negativo: mala práctica estilar dentro del archivo HTML → en proyectos

grandes se nos hace un archivo demasiado largo

ARCHIVO CSS
Misma sintaxis que dentro de la etiqueta style en head

Se conecta al html a través de la etiqueta

<link href=”{acá pongo la ruta en la cual encontrar archivo css}”/>

../ → ir atrás en las carpetas → ../../nombredearchivo.css

./ → ingresar a las carpetas → ./nombredecarpeta/nombredearchivo.css

Por defecto → archivos en la carpeta en la que estamos parados (donde
está nuestro HTML) nombredearchivo.css

SELECTORES
Nos permiten seleccionar un elemento a través de una clase o un ID para
poder darle a estos un estilo en particular.

Class: una clase que podemos darle a varios elementos, aunque no

tengan la misma etiqueta, para darle el mismo estilo a todos los
elementos que tengan esa clase.

ID: usarse una sola vez (para esos casos que sepamos que vamos a dar
ese estilo por única vez en nuestra web) → también nos va a servir si
queremos linkear un elemento para navegar en nuestra página (a través
de la etiqueta <a></a>)

PADDING Y MARGIN
El padding crea espacio extra dentro del elemento

El margen crea espacio extra fuera del elemento

FUENTES
Con font family indicamos qué fuente queremos usar (qué tipo de letra) →
por defecto tenemos ciertas fuentes, pero si queremos usar otras,
podemos importarlas de google fonts

Tipos de letra:

Serif: adornos ubicados a los extremos de cada letra → A

Sans serif: no tiene esos adornos → A

Monospace: todas las letras ocupan exactamente el mismo espacio

horizontalmente → Hola

FLEX
Una manera de distribuir los elementos de una web.
Podemos ubicarlas horizontal o verticalmente →

flex-direction: nos indica si queremos ubicar vertical (column) u

horizontalmente (row → por defecto)

Podemos usar row-reverse o column-reverse → cuando queremos que

algunos elementos se ubiquen vertical u horizontalmente al contrario de
su sentido original

Justify-content → acomoda los elementos horizontalmente si la dirección

es row, y verticalmente si la dirección es column

Align-items → acomoda los ítems verticalmente si la dirección es row,

verticalmente si es column
Align-self: alineación de un determinado ítem dentro de un contenedor
flex

Usar:

https://flexboxfroggy.com/#es

TAMAÑOS
Además de píxeles, tenemos varias unidades de medida en CSS.

Varias, casi inutilizadas, pero me interesa que conozcan:

em: se basa en el tamaño de fuente del elemento en que se encuentran

rem: basadas en el tamaño de fuente del elemento html

COLORES
Con rgb:

rgb(cantidad de rojo, cantidad de verde, cantidad de azul)

El valor máximo es de 255 para cada cantidad, y también puede

expresarse en porcentajes, siendo 0% = 0 y 100% = 255

En hexadecimal:

#cantidadderojocantidaddeverdecantidaddeazul

Habrá dos valores para cada cantidad #ff0000 → aquí rojo con su valor
máximo y 0 para verde y azul

Si quiero hacer violeta #ff00ff

FORMULARIOS
Etiqueta form como principal → su atributo más importante es method →
post será el más seguro, mientras get hará que se muestre la información
ingresada en la url

Dentro de ella los elementos

input (los campos donde voy a escribir mi nombre, por ejemplo)

Label → como contenedor de los inputs y el texto que quiera poner antes,
después o dentro del input

textarea → Campo de texto multilínea (para agregar un mensaje en un

formulario de contacto)

INPUT
Tipos: checkbox, radio, text, password, email, file, number, date → hay
muchos más. Se escribe como cualquier atributo type=”text”

Atributos: value (para el valor del input, por ahora no va a ser tan usado
como cuando aprendan JS), placeholder (un texto que podemos poner
dentro del input para dar una pista de cómo completar el input pero que
no le da un valor), name (muy importante, ponerlo obligatoriamente,
sobre todo para los input radio). Hay más.

LABEL
Su atributo más importante es for=”nombre del ID del input”. Porque
vincula el label con su respectivo input

BORDER
Le da un borde a nuestros elementos:

border: grosor estilo color

border: 2px (solid, double, dotted) red

Podemos aclarar si queremos border-top (bottom, right, left)

Border radius:

redondea las esquinas del elemento (también podemos indicar en qué

esquina agregarlo, ejemplo: border-top-left)
Pseudoclases
Es una palabra que se agrega al selector y que determina el momento en
el cual el elemento tendrá determinado estilo.

Sintaxis:

Se agrega al selector con “:”

selector:pseudoclase
:hover → cuando se pasa el cursor encima del elemento

:active → podría ser un botón o link. Se da cuando se hace click en ese

elemento (lo que dura el botón presionado)

:checked → input radio o checkbox seleccionado

:focus → cuando en, generalmente, un formulario se hace foco sobre un

elemento, generalmente, input (cuando se hace click en el y se tipea ese
elemento tiene el foco)

:visted → un enlace ya visitado

:nth-child(posición) → selecciona elementos en determinada posición

dentro de un grupo de elementos hermanos→ :nth-child(4n) → acá será
cada cuarto elemento dentro del grupo

¡Hay muchas más!

https://developer.mozilla.org/es/docs/Web/CSS/Pseudo-classes

https://www.w3schools.com/css/css_pseudo_classes.asp

Pseudoelementos
Sirve para estilar partes específicas de un elemento

selector::pseudoelemento

El único que usé hasta ahora es

::first-letter → para poner mayúscula a la primer letra

 p::first-letter { text-transform: lowercase; } (uppercase para el caso de
may)

Position
Static
Por defecto. Se posiciona siguiendo el flujo normal de los elementos
pero NO se podrá posicionar utilizando las propiedades top, left, right,
bottom
Relative
Se posiciona también siguiendo el flujo normal de los elementos (se va
a ubicar donde nosotros esperamos), pero vamos a poder “moverlo”
utilizando las propiedades antes mencionadas
Absolute
Se posiciona respecto a su predecesor más próximo que también use
position (que no sea static) En caso que no haya, se posicionará
respecto al body
Fixed
A diferencia de absolute, no toma en cuenta un predecesor
posicionado. Sigue en la misma posición respecto de la ventana del
navegador aunque se haga scroll
Initial
Sería lo mismo que poner ‘static’ (porque static es el default)
Inherit
Valor heredado del elemento padre
Sticky
Comportamiento de position relative, hasta que, al llegar a
determinado punto empiece a funcionar como fixed → tengo un
elemento a mitad de pantalla, cuando hago scroll y toco ese elemento,
empieza a ser fixed.
Z-index
Ayuda a ordenar “en capas” nuestros elementos posicionados.
el que tenga z-index de mayor valor, será el que se verá por encima de
otros con menor valor.
elemento1{
position: relative
z-index: 2
}
elemento2{
position: absolute
z-index: 1
}
El elemento 1 se verá por encima del elemento 2

Shadow
Sirve para darle sombra a un elemento

Text shadow → para elementos de texto

Box shadow → para contenedores

Los valores que se usan son:

posicionamiento respecto del elemento en vertical y horizontal, nivel de
difuminación, y color
Podemos poner solo los valores de posicionamiento:

box-shadow: 10px 10px (lo que hará que se ponga una sombra totalmente
negra, sin difuminación)

box-shadow: 10px 10px gray (lo que hará que se ponga una sombra gris, sin
difuminación)
box-shadow: 10px 10px 10px gray (lo que hará que se ponga una sombra
gris, con difuminación)

box-shadow: 10px 10px 10px 10px gray (lo que hará que se ponga una
sombra gris, con difuminación y un alcance de 10px - una especie de
“tamaño”)

Diseños responsivos
Hacemos una web responsiva cuando la misma se ve bien y funcional en
todos los dispositivos.

Podemos empezar maquetando la web para desktop → como venimos

haciendo hasta ahora (o, en simples palabras, para pantallas más
grandes) → Con las media queries vamos a determinar el tamaño de las
pantallas más pequeñas a estilar

O podemos empezar maquetando mobile/móvil → mobile first → Con las

media queries vamos a determinar el tamaño de pantallas más grandes a
estilar

Media queries
Con ellas, vamos a indicar a CSS que tamaños mínimos o máximos (o
ambos) vamos a tomar de referencia para estilar de manera que se vea
bien en todas las pantallas. En general las medidas son estas (o similares)

576px, 768px, 992px y 1200px → pueden encontrarlos como breakpoints

Ejemplo:

@media(max-width: 576px) {

propiedad: valor

}→ 576 o menos va a tener los estilos que pongamos entre {}

@media(min-width: 576px) → 576 o más tendrá los estilos entre {}

@media (min-width: 576px) and (max-width: 992px) → entre 576 y 992 tendrán
esos estilos
Siempre debemos ordenarlas de la siguiente manera:

Si empezamos por desktop → tamaños de mayor a menor:

default - ...900 - 700 - 500...

Si empezamos por Mobile → al contrario:

...500 - 700 - 900…

@media(max-width: 900px){

estilos

@media(max-width: 700px){

estilos

Dropdown
HTML

<div class="dropdown"> → contenedor del botón y el dropdown

<button class="hover-element">Dropdown</button> → boton (o cualquier
elemento para hacer hover)
<div class="dropdown-content"> → contenedor del dropdown
<a href="#">Link 1</a> → links que nos llevan a una sección de nuestra
web
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
CSS

Al contenedor del dropdown y el botón → posicionamiento relativo

Al div del dropdown propiamente dicho, posicionamiento absoluto y

display none
Al elemento que hacemos hover le damos el estilo que queremos:
ej: button{background-color: blue} y cuando hacemos hover, tiene que
aparecer el dropdown

.dropdown{
position: relative
}

.dropdown-content{
position: absolute
display: none
}

.dropdown:hover{
dropdown-content{
display: block
}
}

Transitions
Define la transición entre dos estados de un elemento.

En general se usa a través de alguna pseudoclase.

La propiedad transition es la abreviación de varias propiedades:

transition-delay: tiempo que tarda en empezar a hacer la transición

transition-duration: el tiempo que dura la transición en total

transition-property: la propiedad que se va a modificar con esa transición

transition-timing-function: velocidad de transición

Transition-timing-function

ease (por defecto) —> empieza lento, va más rápido y al final vuelve a
estar lento
linear —> la misma velocidad
ease-in —> empieza lento
ease-out —> termina lento
ease-in-out —> lento al inicio y final
cubic-bezier(n,n,n,n) —> valores propios

div { prop velocidad

transition: width 2s linear 1s;
duración delay
}

Transform
Translate

Mueve al elemento de su posición original.

En este caso el elemento empieza representado de color gris en su

posicion original, el rosa muestra la posición transofrmada. Se movió a la
derecha y hacia abajo.

transform: translate (x, y)

Rotate

Rota el elemento

El elemento empieza representado en azul y al rotar aprox 20 grados

termina en la posición lila

transform: rotate(nºdeg)

Hay muchos más:

scale para cambiar el tamaño, skew para modificar los grados de los
lados verticales u horizontales , matrix para combinar todos los tipos
de transformación
(matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()))

https://www.w3schools.com/css/css3_2dtransforms.asp

Pueden verlo en la w3s. Es un tema más avanzado, por lo que me

interesaba solo darles una introducción.
Overlay
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>

El container va a tener los estilos que queramos (ejemplo si queremos que la

imagen sea redonda, pondremos un border-radius)y un posicionamiento relativo, la
imagen ocupará el 100% del div (podemos poner overflow: hidden, para que no
rebalse o desborde el div).
El div overlay es el que va a tener la magia → inicialmente va a tener 100% de width
o height y cero del otro (depende si queremos que ingrese horizontal o
verticalmente), tenemos que ubicarlo al top y left en 0 para asegurarnos que
coincida con el div original y la transición que deseemos.
Cuando hagamos hover al container pondremos al 100% el width o height que
pusimos inicialmente en 0

Tablas
<table> es la etiqueta que engloba toda la tabla.
Usaremos tbody, thead, tfooter → si queremos usar etiquetas semánticas
para determinar la finalidad de cada sección de la tabla.
El header o título de cada columna o fila se dará con un <th>, cada fila con
un <tr> y con <td> cada celda
<table>
<tr><th></th></tr>
<tr><td></td></tr>
</table>

Para estilos:
border-collapse → una sola línea en el borde, no por cada elemento
text-align → horizontalmente
vertical-align → verticalmente

Para que sea responsiva:

Poner un div contenedor con la propiedad overflow-x con el valor auto.
De ésta manera lograremos un scroll que hará que podamos ver toda la
tabla correctamente
Bootstrap
Es un framework de CSS → fue creado para estandarizar los estilos de
Twitter
Un framework es una estructura que nos asiste, que proviene de un módulo
de software que nos sirve para el desarrollo
Está pensado para facilitar los diseños responsive

Podemos dar estilo utilizando clases, pero también tiene componentes

pre-hechos

Pros:
Mobile first
Buena experiencia de usuario → componentes/colores intuitivos
Reutilización de código

Contras:
Hace que todas las webs sean casi iguales
No vamos a tener un buen HTML
Podemos descargarlo (quizá podría ser necesario en aquellos casos que
usemos JS o alguna librería - como React, Vue, Angular)

SIno, simplemente copiamos y pegamos los links que veamos en la web

oficial

https://getbootstrap.com

Sistema de grillas

A través de columnas medimos el tamaño de nuestros elementos. Lo

pensamos en 12 columnas. Si a un div azul le doy 6 columnas, y a otro rojo
le doy 6 columnas. Tendremos entonces, mitad azul y mitad rojo.

Sintaxis

<div> con clase container

Solo dentro de él podemos poner un div con clase row.
Dentro del div clase row, voy a poner mis columnas (col) → por defecto se
pondrá el mismo tamaño para cada una - div clase col-

Esto posiblemente sea lo más necesario para aprender de bootstrap, lo

demás son nombres de clases, o copiar y pegar elementos o
componentes a los que luego le daremos un estilo propio.