Para empezar, sobre el desarrollo web, yo creo que lo mejor,
y justamente en el bootcamp se hace, es revisar cómo funciona una página web
para entender las diferentes partes que componen una página web,
qué es lo que realmente hace una página web, qué es lo que crea una página web.
Cuando entramos, qué está ocurriendo.
Así que en este caso, antes de empezar a programar,
hoy vamos a hablar de los fundamentos de las aplicaciones web.
Y para eso vamos a ver diferentes cosas, cuando se hacen requests,
cuando, por ejemplo, se crea el árbol de elementos,
qué es el árbol de elementos, qué diferentes lenguajes son los que componen una página web,
y cómo podemos ver justamente esto.
Entonces, lo que vamos a ver, para empezar,
es comentaros cómo podemos inspeccionar las páginas web.
Así que, como veis, vamos a empezar de una forma desde abajo,
para cosas básicas y para que todos estemos básicamente en la misma página.
Entonces, tenéis diferentes opciones para hacer esto.
Aquí ya nos dicen que entremos en esta URL para inspeccionarla.
En este caso voy a ir a Chrome primero, porque en Chrome es bastante más sencillo.
Esta es la página web.
La página web ahora mismo no es importante el contenido ni nada.
Pero lo que sí que podemos ver y lo que nos dicen es que una cosa que tenemos que conocer
y es súper importante y durante todo el curso vamos a estar viendo,
es el tema de las herramientas de desarrollo.
Es súper importante este concepto.
¿Cómo se abren y qué son las herramientas de desarrollo?
Tienes diferentes formas.
La sencilla seguramente es viendo cualquier elemento.
Si le das al botón derecho, le das a inspeccionar,
y esto directamente ya te abre estas herramientas aquí,
que además puedes mover.
Le das a estos tres puntos,
lo puedes mover a la derecha, lo puedes mover para abajo,
puedes hacer lo que quieras.
En este caso lo importante es que tenemos diferentes pestañas,
elementos, consolas, sources, network.
Ahora mismo nos vamos a enfocar especialmente en dos,
en la consola y en la network,
pero sobre todo en la network,
porque lo que me interesa justamente es enseñaros
de qué se compone una página web.
Entonces, esto sería en Chrome,
en el caso de que tengáis Firefox, que lo tengo por aquí,
para abrirlo sería básicamente lo mismo.
Le dais al botón derecho, inspeccionar, elemento,
y ya lo tendríamos.
Exactamente lo mismo.
Y sería muy parecido.
Es un poco diferente las herramientas de desarrollo,
pero lo mismo.
Tenemos aquí consola y tenemos red en lugar de network.
Yo, porque Chrome, lo tengo en inglés.
Pero al final la información que podéis encontrar uno y otro
es exactamente la misma.
Así que vamos a seguir con Chrome,
pero si prefieres Firefox, que sepas que es posible.
Ahora lo que voy a hacer es justamente refrescar otra vez la página.
Así que le voy a dar, pam.
Y lo que hacemos aquí es inspeccionar un poco
las requests que tenemos por aquí.
Voy a ver si puedo subir esto.
Las requests son los recursos que está cargando esta página
para funcionar.
Alguien me pregunta cuál recomiendo, de Firefox o Chrome.
A mí me gustan más las de Chrome,
pero las de Firefox están muy bien.
O sea, no creo que tengas ningún problema trabajando con una con otra.
A mí me gustan más las de Chrome,
igual porque estoy más acostumbrado y ya está.
Entonces, estos son los tres recursos
que están creando esta página web.
Por un lado, tenemos esta request que será la principal.
Esto es cuando entramos a esta URL,
nos está devolviendo justamente esto.
Nos dice, has hecho una request sobre esta URL.
La request que has hecho es de un tipo get,
que veremos que hay diferentes tipos de requests que podemos hacer.
Y el código que nos ha devuelto es un 200.
Un 200 básicamente es que ha ido bien,
que esta URL está funcionando correctamente.
Y luego podemos ver, estos son básicamente algo de la request,
un poco de información de la request,
pero tenemos aquí dos cosas.
La cabecera de respuesta y, por otro lado, las de la petición.
De respuesta, esto básicamente es que el servidor nos ha contestado algo
y aquí tenemos diferente información que no vamos a ver ahora al detalle.
No es importante.
Y la request, la cabecera de la request,
es cuando nosotros hemos hecho la petición,
le hemos enviado cosas como para indicarle algún tipo de información al servidor.
Por ahora, el servidor es una caja negra
que nosotros le hemos pedido algo y nos ha devuelto algo.
Ahora, lo importante de esto que nos ha devuelto es esto.
Aquí podemos ver ya la primera esencia del desarrollo web,
que es el HTML,
que básicamente es la semántica,
es el marcado de nuestra página web.
Este HTML es lo que hace que nuestra página web
tenga información de algún tipo.
Así que esto es lo que nos ha devuelto el servidor, por un lado.
Esta sería la respuesta.
Esta es la respuesta que hemos hecho
cuando hemos tenido nuestra petición
con el protocolo HTTP y nos ha devuelto esta información,
esta caja negra,
que por ahora no es importante saber lo que está haciendo por dentro.
¿Por qué?
Porque pueden ser mil cosas.
Para nosotros ahora mismo es una caja negra
porque esa caja negra puede hacer un montón de cosas
y no lo sabemos.
Así que en este caso, ya está.
Por otro lado, aquí podemos ver que tenemos otra petición.
En este caso, la petición es una imagen
y además de esto, también el favicon.ico,
que esto es el icono que podéis ver aquí,
que no se puede ver porque no tendrá favicon
y por eso no se ve.
Así que con dos peticiones ya tenemos esta página web.
Vale.
Perfecto.
Entonces, cada vez que nosotros refresquemos,
podemos ver en cualquier página web
todos los recursos que tiene.
Si nosotros entramos en mi blog, por ejemplo,
y abro las herramientas de desarrollo a saco,
¿vale?
¡Pam!
Veríamos aquí que hay un montón de recursos.
Hay muchos más.
¿Por qué?
Porque por un lado sí que tenemos el principal
que me está devolviendo el HTML
que necesita esta página para pintarse,
pero yo tengo muchas más imágenes.
Así que aquí tengo más imágenes.
Y ya empezamos a encontrarnos otros status code.
Los 200 son.
Todo ha ido bien, fantástico, genial.
Pero el problema es que estamos encontrando
otras peticiones.
Aquí, de hecho, son todas 200 también,
pero podemos ver que ya tenemos aquí un 404.
Hay diferentes status code.
De hecho, hay una cosita que no te he explicado
y que es bastante importante.
¿Ves aquí que tengo un disabled caché?
Esto lo que quiere decir es que estoy desactivando la caché.
¿La caché qué quiere decir?
Que estas peticiones se están haciendo de nuevas todo el rato, ¿vale?
Se está haciendo como si fuese la primera vez
que está viendo estos recursos.
Pero en internet, como funciona esto en realidad,
es que cuando tú visitas la misma petición dos veces o tres,
lo que se intenta hacer es evitar que ese recurso
se vuelva a descargar de internet
y ya reaproveche el recurso que tiene,
ya sea de forma local o de una forma que esté intermedio
sin necesidad de ir totalmente al servidor.
Así que si desactivo esto y vuelvo a refrescar,
lo que podemos ver es que ya tenemos otros status code.
El 304, por ejemplo, este lo que quiere decir
es que no se ha modificado este recurso
y por lo tanto no hace falta volver a pedirlo.
Pero, ¿ves? Todavía hay alguno que sí que pone un 200,
pero en este caso podemos ver que se ha servido desde la memoria.
Esto sería un poquito todo lo que tendríamos
de recursos de páginas web y tal.
Por ahora, importante, para seguir este bootcamp,
una de las cosas que te voy a pedir
es que desactives la caché.
Porque siempre vamos a querer,
cuando tengamos las herramientas de desarrollo abiertas,
lo que vamos a querer es ver los últimos recursos,
¿vale? Queremos verlos actualizados.
Y no queremos, si no las tenemos abiertas,
es posible que veamos, que hagamos cambios
y no los veamos reflejados.
Hay formas de forzarlo, ¿vale?
Podríamos darle al F5, control F5 o mayúscula
y apretar aquí, pero lo importante es tener siempre
las herramientas de desarrollo abiertas
y tener el disable caché o desactivar caché
o como se quiera decir en castellano en vuestro navegador, ¿vale?
Esto es súper importante.
Así que, cada vez que ahora refresquemos,
veremos que aquí tenemos un montón de peticiones.
Igual aquí.
De hecho, aquí tenemos una URL que podemos ir,
que es notes.
Si le damos a inspeccionar
y vamos a ir a esa página web,
vamos a hacer esto un poquito más grande, ¿vale?
Vamos a notas.
Vale.
Y aquí podemos ver que hemos abierto una página
que se llama notas,
que el contenido no es importante,
pero lo más interesante de esta página
es que tiene, digamos,
casi todos los recursos,
sin contar imágenes y cosas así,
pero los recursos básicos
para hacer una página web.
En este caso, tenemos de nuevo
la request principal,
que es la que nos devuelve el HTML,
el marcado de nuestra página.
Luego tenemos el CSS.
Un CSS bastante sencillo.
Bueno, de hecho, ya se puede ver
que es bastante sencilla la página,
no es que se vea muy bonita.
Pero, bueno, justamente lo que le está dando estilo a esto
son estas ocho líneas CSS.
Estas ocho líneas CSS lo que nos está diciendo
es que tiene un padding de 10 píxeles,
el borde, bla, bla, bla.
Esto es otra de las patas de las columnas
súper importantes del desarrollo web, el CSS.
Por otro lado, tenemos el JavaScript.
Ahora mismo no es importante el contenido
que vamos aquí, ¿vale?
Aunque ya te digo que esto lo que está haciendo
es una petición llamada AJAX.
Básicamente es una petición asíncrona
que lo que está haciendo
es pedir información de un servidor
y al conseguirla,
pues pintar esa información en la pantalla.
¿Por qué?
Porque si te fijas aquí en estas notas,
podríamos intentar,
a ver si soy capaz,
ah, sí, mira, podemos desactivar,
esto también suele ser muy útil.
Puedes desactivar JavaScript.
Para esto yo he hecho mayúscula, comando P.
Le das a desactivar JavaScript.
Y si refrescas, ¿vale?
Puedes ver que no hay nada, ¿vale?
Así que la información de las notas
no nos está llegando en el servidor.
¿Qué es lo que está haciendo?
Voy a volver a activar JavaScript, ¿vale?
Y voy a refrescar otra vez.
Puedes ver que con el JavaScript desactivado,
esto es lo que ha cargado.
Pero si refresco ahora con JavaScript activado,
ha hecho más peticiones.
Y es que JavaScript,
lo que está haciendo una petición al servidor
para decirle,
oye, ¿qué notas tienes?
Entonces se la devuelve
y lo que está haciendo aquí,
utilizando el DOM,
que justamente ahora os explicaré,
lo que está haciendo justamente es pintar estas notas
en nuestra página web, ¿vale?
Esta página web de aquí.
Ahora, ¿qué es esto del DOM?
¿Qué es esto del DOM?
Y cómo puede ser que una vez que hemos recuperado
esta información del servidor,
ahora seamos capaces justamente
de pintar estas notas en el HTML.
Porque ya hemos visto un poco la diferencia, ¿no?
De que el HTML en JavaScript estaba vacío
y con JavaScript hemos podido listar todas las notas.
Entonces, el DOM básicamente es
el árbol de elementos de nuestra página web.
Como hemos visto,
teníamos un marcado HTML
y si le damos a elementos,
o elements en este caso,
podemos ver un poco el árbol.
¿Por qué es un árbol?
Porque al final tiene una raíz,
que es HTML,
y a partir de HTML,
HTML tiene diferentes, pues, digamos,
ramas, ¿no?
Por un lado tendríamos head,
que es un HTML especial,
que es para la cabecera.
Teníamos el body,
teníamos un div,
dentro del div tendríamos otro.
Al final lo que estamos teniendo
es un árbol que poco a poco,
pues, va,
las raíces se van esparciendo.
Así que dentro de notas,
lo que podemos hacer es crear nodos
de forma totalmente dinámicas
para hacer que esta página
siga creciendo, ¿vale?
Podemos cambiar su contenido,
podemos hacer cualquier tipo de cosa
en este aspecto.
Al final,
esto es lo que hace que nuestra página web
pueda tener vida también
en la parte del cliente,
no solo en el servidor.
Si siempre nos dieran en el servidor,
nuestra página ahí hecha,
pues, no sería tan divertido.
Así que esta es la gracia
que tendría el árbol de elementos.
Con el árbol de elementos,
obviamente,
no solo es que podemos ver los elementos,
los podemos modificar,
podemos añadir nuevos,
sino que también podemos escuchar eventos.
Podríamos hacer que cada vez
que se le dé un clic a una nota
ocurra alguna cosa.
Y esto es una de las cosas
que veremos, ¿vale?
Esta es una de las cosas
que podremos ver más adelante.
Ok.
¿Qué más hay?
Porque si vemos aquí el JSON,
veríamos también
que el JSON,
que hay una cosa importante,
porque las notas,
cuando nos la devuelve el servidor
con información,
¿cómo nos devuelve esta información?
Pues aquí podemos ver
esta request que estamos haciendo,
este data.json.
Esto es lo que nos está devolviendo
el servidor
cuando le estamos diciendo,
va,
dame todas las notas.
Entonces,
te devuelve este data.json.
Al final,
el data.json
es una estructura de datos
que estamos utilizando muchísimo
en el desarrollo web
y que tienes que conocer,
porque si no,
es bastante lioso
que no lo conozcas,
pero al final,
vas a ver que es muy similar,
muy similar,
a cómo funciona,
en realidad,
JavaScript.
¿Por qué?
Porque la notación
te recuerda a un objeto.
Y, de hecho,
se llama
JavaScript
Object Notation,
¿vale?
Por eso es json,
JavaScript Object Notation.
Así que aquí es donde tendríamos
un array
con todas las diferentes notas
y esto es lo que estamos leyendo
para pintar los nodos después.
De hecho,
es muy fácil.
Aquí el primer resultado,
el contenido es
my new node,
el date,
aquí tendríamos la fecha
y esta primera nota
justamente es esta
que puedes encontrar aquí
con toda esa información,
¿vale?
Así que,
eso sería por ahora
los fundamentos
en el sentido
de hacer una petición
y ver cómo se está respondiendo
y qué es lo que está haciendo
en este lado
nuestra página web,
¿vale?
Cómo se está comportando,
cómo la está creando
y todo esto.
¿Vale?
¿Qué más tendríamos por aquí?
El modelo,
mira,
esto ya lo he comentado.
Vale,
aquí tenemos lo de manipular
y esto,
vamos a hacer un repaso
sobre el JavaScript
que os he comentado
de cómo se están creando
las notas y tal,
¿vale?
Vamos aquí otra vez,
vamos al JavaScript
y en este JavaScript
por ahora olvidados
de todo lo que es
la petición en sí,
esto de onReadyStateChange,
todo esto al final
no es tan importante.
Lo interesante está aquí,
este data que podemos ver aquí,
si te fijas,
aquí tenemos algo
que está utilizando el JSON,
esto ya lo veremos
y lo interesante
está aquí dentro.
Aquí dentro
es donde justamente
está creando
un elemento li
que es un elemento,
como os digo,
para listar,
aquí tendríamos las notas,
está creando este elemento li,
lo está creando justamente aquí
y lo que está diciendo es,
vale,
créame el elemento li
y ahora lo que vas a hacer
es añadir este elemento li
en la lista ul,
¿vale?
En la lista desordenada
de elementos
y además,
después dentro de este li
lo que está haciendo
es crear un nodo de texto,
porque al final
tú puedes tener nodos
que sean directamente texto
o puedes tener que sean nodos
que sí que tengan HTML,
pero al final llega un momento
de que el texto,
digamos,
es el nodo más pequeño
que puedes tener.
Al final,
este nodo de aquí,
my new node,
esto es solo texto,
así que lo que estamos haciendo ahí
es crear ese nodo
que solo tiene texto
con el contenido de la nota.
Aquí puedes ver
node.content
y ya estaría,
node.content
que además viene aquí,
aquí es donde tenemos
el content,
¿vale?
Lo está sacando de ahí.
Así es como estamos creando
justamente
donde estamos manipulando
el DOM,
el árbol de elementos.
Así que ya sabes,
cuando se hable del DOM,
del árbol de elementos,
del document object model,
de qué estamos hablando,
¿ok?
Hasta ahí,
¿todo bien?
¿Hay preguntas?
¿Hasta aquí?
Porque os veo muy tranquilos.
Os veo muy tranquilos.
Muy bien.
Esto es que estáis súper callados
y que estáis escuchando un montón.
Para que veáis,
una cosa que puede ser
bastante interesante
para que todos practiquemos,
de hecho,
lo vamos a hacer,
¿vale?
Vamos a hacer para practicar.
Imaginemos,
y esto lo podéis hacer
en cualquier página web,
imaginemos que entramos
en mi página web,
mi new dev,
que es súper bien.
A la hora de dominar el DOM,
al final,
es como os digo,
podéis hacer un montón de cosas.
Gracias por la hidratación.
Ahí.
Vale.
Entonces,
una cosa que podéis hacer
es descubrir
cómo tratar con el DOM.
Como os digo,
podéis tener,
por un lado,
leer el DOM
para poder saber
qué es lo que existe aquí
y para eso,
lo mejor es que utilicéis
la pestaña de consola.
Aquí en la consola
podéis utilizar el document
y a partir del document
tenéis diferentes métodos
para poder consultar al DOM.
Así que ahora mismo
no es importante
que sepáis JavaScript
ni que sepáis nada.
Lo importante es que abriendo la consola,
que sepáis que tenéis aquí
la posibilidad de escribir document,
punto,
y a partir de aquí
podéis utilizar diferentes métodos
para consultar
qué hay en el DOM.
Por ejemplo,
imaginemos
que yo quiero saber
cuántos anchors,
cuántos links
tengo en mi página.
Lo que podría hacer
es hacer una query
sobre el DOM
y le voy a decir
Query Selector All.
El selector,
si sabes CSS y HTML,
en HTML,
bueno,
sobre todo en CSS,
el selector
es básicamente
lo que utilizas
para seleccionar
elementos en concreto
que tienes en el DOM
para estilarlos.
Pues esos mismos selectores
los puedes utilizar
para preguntar
al árbol de elementos.
En este caso
podríamos utilizar
un selector
que fuese A,
¿vale?
Y en este caso
ya tendríamos
todos los links
de nuestra página.
Estos serían todos
los links que tengo.
Lo mejor de esto
es que si tú seleccionas uno
puedes ver exactamente
a cuál se refiere.
¿Vale?
Cuando yo estoy aquí
en este 4 lo pongo
puedes ver justamente
en Twitter,
en el logo de Twitter
de mi página
cómo se ha seleccionado.
Esto es súper interesante
y te puede ayudar
justamente a detectar
en el árbol de elementos
qué elemento
te estás refiriendo.
Pero claro,
hay un montón de elementos.
Así que otra cosa
en la que puedes jugar
es en los selectores.
No solo quiero que sea un anchor
sino que quiero un selector
en concreto
que sería, por ejemplo,
solo los que son
Home Article.
Esos elementos
que además de ser un link
tienen la clase
Home Article.
Si le doy a Enter
ahora podemos ver
que solo me devuelve 10.
Así que si me pongo encima
¡Ay!
Me he ido.
Si me pongo encima
puedes ver
a cuál me refiero
con cada uno de ellos
y tengo solo 10.
A partir de aquí
podrías empezar
a hacer todavía más cosas.
En el caso
que solo quieras recuperar uno
en lugar de utilizar
el querySelectorAll
que te devuelve
no un array
pero un nodeList
una lista de nodos
pero por ahora
eso no es importante.
Digamos que te devuelve
una lista con todos esos nodos
puedes decir
devuélveme
solo el elemento
del DOM
que te refieres con esto
al primero que encuentres.
En este caso
en lugar de poner
QuerySelectorAll
pues puedes poner
QuerySelector.
Esto puede ser interesante
para empezar a jugar
para, por ejemplo,
puedes ir a cualquier página
y puedes decir
¡Ostras!
Pues me gustaría
ver cómo puedo aprender
a seleccionar
este elemento
o voy a retarme
a seleccionar
el tercer elemento este
o voy a ir a Facebook
a ver si puedo seleccionar
el like
o lo que sea.
¿Vale?
Entonces
lo que puedes hacer
es con el QuerySelector
quedarte con el primero
y a partir de aquí
las cosas que puedes hacer
como cambiar
la información
que tiene dentro
puedes hacer un montón de cosas
porque el DOM
no es solo de lectura
al final también
lo que quieres es escribir
como hemos hecho
con las notas.
Al final aquí
si quisieses cambiar
directamente
más adelante
veremos otras formas
de hacerlo
pero si quieres cambiar
el contenido
de un nodo
del DOM
lo que deberíamos hacer
es inner
HTML
y aquí podríamos
sobreescribir
el HTML
de ese nodo
¿Vale?
Podríamos decir
pues el primero
que encuentres
en realidad
voy a cambiarlo
por esto
y le damos enter
y aquí puedes ver
que lo que ha ocurrido
es que ha cambiado
ese nodo
por el contenido
que yo le he dicho
o sea que ha hecho
un swap
directamente
lo ha sobreescrito
y esto justamente
es una de las cosas
más interesantes
que vas a ver
que puedes hacer
esto es la forma sencilla
pero al final
esto es la base
de cómo trabaja
incluso
como puede ser
que trabaje React
por detrás
¿Vale?
Entonces
esto es en el caso
de que quieras cambiar
HTML
directamente
o sea HTML
porque quieres cambiar
incluso
lo que es la estructura
del marcado
hemos quitado
el link directamente
y lo ha reventado
o sea
todo lo que había
dentro del link
lo ha sobreescrito
por lo que nosotros
hemos puesto
ahora si lo que quieres
es solo cambiar
lo que sería
el texto
como hemos visto antes
lo que podemos hacer
es decir
por ejemplo
en el
anchor
que tiene la clase
home article
vamos a cambiar
el strong
pero en lugar de cambiar
el HTML
lo que vamos a cambiar
es el texto
de hecho
primero lo podemos recuperar
podríamos leerlo
¿cuál es el contenido
del texto?
pues voy a cambiarlo
por esto
que es lo que tenemos aquí
ahora
si quieres cambiar
solo el texto
lo podrías hacer
y de esta forma
podrías con el igual
asignarle un valor
al contenido del texto
esto es otro texto
¿vale?
le ponemos así
y puedes ver aquí
que ha cambiado
el texto completamente
o sea que lo que está
haciendo aquí
es sobreescribir
solo el contenido
del texto
¿qué pasa
si con el text content
tú intentas
cambiar el HTML?
pongamos que quiero
poner aquí un h2
y un h2
le digo vale
el text content
pues que lo trata
como si fuese texto
como nos estás diciendo
que lo que quieres cambiar
es HTML
pues él cree
que estás intentando
escribir texto
si lo que quieres
es que sea HTML
¿qué es lo que tienes
que utilizar?
pues lo que tendrías
que utilizar
es el inner
HTML
y de esta forma
ahora sí
podrías escribir HTML
y esto sí que
crearía
la estructura
dentro del
árbol de elementos
dentro del DOM
crearía este nodo
con el h2
con el etiquetado
del h2
si le voy a dar ahora
ahora sí puedes ver
que esto es un h2
y para estar seguros
podríamos inspeccionar
el elemento
y aquí veríamos
que es un h2
y que este h2
sí que existe
¿vale?
así que esto sería
como lo hemos creado
hemos cambiado
la estructura del DOM
justamente diciéndole
no, este nodo de aquí
quiero cambiar
lo que tiene
esta rama
y quiero ponerle
una rama
totalmente distinta
¿vale?
muy bien
pues con esto
creo que ya
podríamos decir
que hemos visto
un poco
la manipulación
del objeto
del DOM
de los elementos
y tal
luego tendríamos
que revisar
un poco
el CSS
como os he dicho
antes
el CSS
que tenemos aquí
es muy
muy básico
pero
una cosa que puedes hacer
al inspeccionar
y esto que estamos hablando aquí
aunque es muy básico
es súper importante
porque es una cosa
que vamos a ver
constantemente
en todo el bootcamp
una de las cosas
que puedes hacer
no es solo
aquí podríamos modificar
el contenido del texto
podríamos modificar
todo el marcado
de nuestra página web
pero lo más interesante
que tenemos
en las herramientas
de desarrollo
justamente
es cambiar
el estilo también
así que
hemos visto en el network
cuando hemos entrado
al network
aquí en el main.css
hemos visto que este
era el CSS que tenía
¿no?
el container
y el .nodes
al final estos son
selectores
que si no los conoces
te recomiendo
que los repases
esta semana
porque los vas a necesitar
sí o sí a saco
¿ok?
y con estos selectores
te estás refiriendo
a qué elementos
tienen que pintarse
de una forma
en concreto
con este CSS
así que
imagínate
que te gustaría
decir
bueno voy a ver
cómo podría quedar
este CSS
de otra forma
podríamos empezar
a cambiar el CSS
ir subiendo el fichero
ir viendo cambios
y tal
pero una de las mejores
formas de hacerlo
es justamente
con las herramientas
de desarrollo
vamos a seleccionar
cualquier elemento
por ejemplo
este de aquí
el container
que como hemos visto
ya tiene un CSS
y aquí lo tenemos
justamente
este container
tiene un padding
de 10 pixels
border
un pixel shot
y aquí nos indica
de dónde está
extrayendo este CSS
así que tenemos
el selector
de hecho
si te pones encima
se ve claro
no sé si veis
pero el borde
está en amarillo
porque está indicando
este elemento
y aquí
le podemos dar clic
y podemos ver
el CSS
de dónde está
extrayendo esta información
que es el mismo
que tenemos en el network
pero lo que podemos hacer
aquí es justamente
probar diferentes cosas
aquí podemos escribir
CSS
y empezar
es un rojo eléctrico
que puede matar
pero vamos a poner
algo más
más discreto
por ejemplo
puedes poner un color
y nos hemos
hemos encontrado
que el borde
igual es demasiado
finito
lo vamos a hacer
poner un poquito
más grande
podemos poner aquí
un estilo
border radius
y a lo mejor
el padding
pues nos gustaría
que fuese todavía
más bestia
¿vale?
y estos cambios
los tenemos aquí
y podemos ver
cómo se está cambiando
este CSS directamente
ahora
una vez que refrescas
esto se pierde
hay diferentes formas
de hacer que esto
no se pierda
por ejemplo
puedes tener
dentro de sources
podrías hacer
los local changes
¿cómo se llamaba esto?
overrides
se llaman overrides
pero esto lo veremos
más adelante
ahora mismo
no es importante
lo importante
es que esto
lo tengas clarísimo
que puedes hacer esto
y que esto lo domines
así que si no lo dominas
lo que te recomiendo
de nuevo
es que vayas a una página web
y empieces a jugar con esto
por ejemplo
pues puedes ir a mi página
y decir
bueno pues no me gusta el fondo
¿dónde tiene el fondo?
¿cómo se puede cambiar el fondo?
pues si pongo aquí red
por ejemplo
vale pues aquí se cambia
quiero cambiar
pues aquí
va jugando
y esto es de lo más básico
que normalmente
hacemos
para empezar a saber
cómo jugar esto
vale
este
esto me parece
súper interesante
y que creo que
todo el mundo
tiene que
tiene que
tiene que dominar
¿vale?
que es el hecho
de cómo
qué pasa
cuando realmente
estamos pidiendo un recurso
que justamente
lo hemos visto antes
¿no?
cuando alguien pide un recurso
mira
aquí lo tenemos
por ejemplo
pues el CSS
o todos estos recursos
cuando tú pides un recurso
es que desde el cliente
estás haciendo
lo que se dice
una petición
al servidor
el servidor
va a tratar esto
¿no?
y según lo que sea
te va a devolver
esa información
en este caso
aquí tenemos
este croquis
o este diagrama
que está bastante bien
en este caso
tenemos todas las requests
todas las peticiones
que se están haciendo
la primera
es cuando está pidiendo
la página de notas
entonces llega el servidor
y el servidor
lo que le va a devolver
es HTML
luego hace la petición
del CSS
y el servidor
lo que le devuelve
es el CSS
ahora
esto hasta aquí
está bien
estas tres que vemos
aquí arriba
son el HTML
el CSS
y el JavaScript
pero ¿qué está pasando?
que una vez que devuelve
el JavaScript
es aquí
donde el servidor
el cliente
perdón
el navegador
está ejecutando
ese JavaScript
y es ese JavaScript
el que va a hacer
la petición
al servidor
aquí lo podemos ver
está haciendo una petición
get
básicamente la petición
get
es una de las tipos
de peticiones
que puedes hacer
que es para
obtener datos
¿vale?
en este caso
esta petición
que no la está haciendo
directamente
el navegador
con los recursos
que vienen del HTML
ni la petición principal
sino que es el propio
JavaScript
el que está haciendo
esa petición
al servidor
y en este caso
le está pidiendo esto
y el servidor
pues entonces
le pide directamente
su contenido
y ya está
el contenido que hemos visto
antes con el JSON
una vez que ha obtenido
esos datos
pues ya hemos visto
que utilizando el DOM
la API del DOM
pues lo modifica
y añade
todas esas notas
vale
ahora
una
para seguir con esto
¿hasta aquí bien?
¿hay alguna pregunta?
a ver
preguntas
a ver si hay alguna pregunta
bueno
tenemos una pregunta
bastante buena
de Marcos Gape
que dice
¿esto no ocurre en paralelo?
vale
en realidad
hay peticiones
aquí
aunque en este diagrama
podemos ver
que parece que no ocurren
en paralelo
en realidad
cuando se hacen
las peticiones
se hacen
algunas en paralelo
y otras en cascada
vamos a refrescar
para verlo esto
más claro
podemos ver
que la primera
la primera petición
que al final
es cuando tú entras
a esta página web
estás haciendo ya
una petición al servidor
vale
la primera petición
que siempre se hace
es cuando tú introduces
esta URL
y ya hace
una petición
directamente al servidor
al hacer esta petición
en el servidor
lo que está ocurriendo
es que es el servidor
el que te devuelve
esas respuestas
con los primeros datos
que te está dando
una pista
de lo que tienes
que seguir cargando
vale
entonces
le damos las notas
y las notas
que nos devuelve
el HTML
y que pasa
en este HTML
que este HTML
nos está diciendo
vale
tienes que cargar
este CSS
y tienes que cargar
este JavaScript
como cuando recupera
este HTML
ahora si
sabe que recursos
tiene que cargar
sabe que tiene que cargar
dos recursos
así que
si que podemos ver
en este momento
voy a refrescar otra vez
aquí
aquí si que puedo ver
que estas dos peticiones
a ver quítate
estas dos peticiones
si que las está haciendo en paralelo
tanto del CSS
como del JavaScript
vale
estas dos peticiones
si que las hace en paralelo
¿por qué las hace en paralelo?
porque aquí
si que sabe
que
que básicamente
estos recursos
si que los necesita
pero antes
no lo podía saber
vale
por eso
tiene que esperar
tiene que esperar
a la request principal
y luego hace estas
y luego lo mismo
con el data json
si os fijáis
¿qué pasa?
el data json
cuando sabe que lo tiene que cargar
solo sabe que lo tiene que cargar
justamente
cuando
se carga el JavaScript
porque es el JavaScript
el que sabe
¿ves?
es el que sabe
que tiene que cargar
este data json
entonces cuando se descarga
el JavaScript
y lo evalúa
entonces
aquí podemos ver
como está haciendo
esta escalera
¿no?
podemos ver
que una vez que termina
la del JavaScript
entonces empieza la el json
y podemos ver
esa escalera
que va un poco así
así que hay algunas
que si que las podrá hacer
en paralelo
pero hay otras
que no podrá hacerlas
en paralelo
¿vale?
¿qué más?
¿en qué se diferencian
los diferentes tipos
de peticiones?
su seguridad
dice el Rodra 14
las diferentes peticiones
que vemos aquí
en realidad
la única diferencia
que tenemos entre ellas
es el tipo
en el sentido
de que tenemos una
que es document
que es el HTML
la petición principal
tenemos aquí una
que es CSS
otro script
XHR
al final esta es la petición
que es asíncrona
para pedir datos al servidor
y esta
que aunque pone text HTML
esto es porque
está dando un 404
seguramente
pero está devolviendo
HTML
esto está
es incorrecto
pero se supone
que debería devolver
un icono
eso sería un poquito
¿vale?
¿qué más?
¿qué más preguntas
tienes por aquí?
el favicon
¿por qué lo busca
después del JavaScript
si tienes el HTML
que ya sabe lo que necesita?
fíjate en esto
Manuel
en realidad el HTML
si te fijas
no está
indicando
nada del favicon
o sea
no sabe
que necesitas
ese favicon
pero
da igual
aunque lo pusiera
aunque lo pusiese
el navegador
obviamente
hace ciertas optimizaciones
por ti
en temas de rendimiento
¿qué pasa?
que el favicon
en realidad
es un recurso
que no es importante
esto lo veremos
más adelante
¿vale?
pero podremos ver
que los recursos
tienen diferentes prioridades
y es normal
o sea
no es lo mismo
como de importante
pues el CSS
que a lo mejor
una fuente
o a lo mejor
una imagen
que está en el footer
todo tiene una prioridad
distinta
de hecho
podríamos ver aquí
en Priority
podemos añadir
a esta pestaña
y nos dice
las prioridades que tiene
en este caso
parecen iguales
pero bueno
si hago esto
un poquito más grande
puedes ver
que la principal
por supuesto
tiene la prioridad
más grande de todas
como el normal
y el CSS
también
¿por qué el CSS
tiene una prioridad tan alta?
el CSS
tiene una prioridad
muy alta
más alta
incluso que JavaScript
por el DOM
justamente por lo que
comentábamos del DOM
¿cómo puede ser eso?
pues el caso
es que el CSS
afecta al DOM
a cómo se ve el DOM
y el JavaScript
¿qué pasa?
que tú puedes preguntar
por el DOM
y hemos visto
que podemos seleccionar
elementos con el DOM
¿verdad?
pero claro
hay veces que en el DOM
lo que vamos a querer
no solo es ver si existe
a ver
no solo ver si existe
como en este caso
sino que a lo mejor
hay veces que queremos ver
cuánto es lo que mide
por lo tanto
en el navegador
¿qué pasa?
el CSS
tú puedes en los estilos
cambiar
cuánto mide
un elemento
por lo tanto
el CSS
siempre tiene más prioridad
que el JavaScript
ya que
podría haber problemas
si el CSS
se cargase
después del JavaScript
y el JavaScript
justamente preguntase
cuánto ocupa un elemento
¿vale?
por lo tanto
lo que se suele hacer
es que el CSS
tenga más prioridad
que JavaScript
por eso es que lo está haciendo
de esta forma
así que la prioridad
ya puedes ver
que es distinta
en este caso
vemos esto
pero si vemos
páginas más complejas
como puede ser
por ejemplo
esta de aquí
por poner un ejemplo
y miramos la network
que esto es lo que os recomiendo
que entréis en un montón de páginas
y veáis este tipo de cosas
podemos ver
un montón de prioridades
aquí podemos ver
que hay JavaScript
que puede tener
una prioridad baja
imágenes que pueden tener
una prioridad alta
podemos ver un montón
de diferencias
¿vale?
aunque el tipo de contenido
sea ese
incluso puede ser que CSS
otro CSS
tenga una prioridad
más baja que otro CSS
porque no es tan crítico
para la página
¿vale?
vamos a ver
qué más
vamos a ver
qué más
comentáis por aquí
el favicon
¿por qué lo busca?
vale
eso
el favicon
exacto
es que me he quedado ahí
el favicon
entonces ¿qué pasa?
que el favicon
aunque aquí ponga un hide
en realidad
lo que está haciendo
es dejarlo para el final
porque no es crítico
para la página
lo que pasa
es que como ya ha terminado
entonces sí que le da
el máximo de rendimiento
para descargar
esta petición
pero ya no es tan importante
o sea ya lo han dejado
para el final
porque qué más te da
que el favicon
este de aquí
pues se vea al final
aunque lo tuvieses en HTML
lo dejaría para el final
¿vale?
aunque ya puedes ver
que por defecto
sí que mira el favicon
esto es una cosa
que aunque no lo pongáis
lo pone por defecto
¿vale?
os ha dejado aquí
de apelu
algunos recursos
para practicar CSS
para que esta semana
esto ya lo tengáis
totalmente
más que controlado
¿vale?
aparte de las peticiones
get
existen otras
existen otras
y las veremos en el curso
pero como podéis imaginar
no solo vamos a querer
obtener datos
sino que vamos a querer
escribir datos
y a partir de ahí
los que puedes imaginar
tenemos el get
tenemos el put
que el put sería como
para actualizar datos
tenemos el post
que es como para crear datos
tenemos el delete
que es para borrar datos
al final es algo semántico
de las peticiones
pero también se pueden utilizar mal
podrías hacer un get
y en realidad por detrás
crear datos
así que es un tema
de corrección semántica
a la hora de hacer este tipo
de peticiones
¿vale?
¿qué más?
¿qué me decís por aquí?
¿cómo se dan cuenta?
¿cuál va primero
y cuál va después?
dice Lucas
se da cuenta
porque es como lo está descubriendo
obviamente el navegador
hace su optimización
pero es como lo está descubriendo
o sea
lo primero
esto es imposible
que no haga otro
que no sea notes
¿por qué?
porque es lo que estamos pidiendo aquí
o sea
es la URL de direcciones
y luego
ha descubierto
que necesita este recurso
y luego este recurso
y si hubiese un tercero
pues ese recurso
y eso básicamente
lo que machea un poco
con lo que estamos viendo aquí
ahora el JS
está descubriendo
necesita este recurso
y justamente
es este recurso de abajo
al final
vais a ver
que es muy predecible
que es en formato cascada
como se van viendo los recursos
se va complicando
por otras cosas
que iremos viendo
pero para
hasta aquí
podemos ver
que más o menos
tiene sentido
hay un sonido de fondo
hombre
le has caído una musiquilla
que debería ver
que es una música
como para programar
la prioridad
Verdas Keyes
se suele gestionar
de forma totalmente
automática
se suele
pero hay diferentes etiquetas
HTML
que te permiten
cambiarle la prioridad
a un recurso
por ejemplo
imagínate que tú sabes
que hay una imagen
que es más prioritaria
que otra en esta página
por ejemplo
el logo
pues podrías añadir
etiquetas HTML
para darle una pista
y se llaman así
pistas al servidor
para decirle
oye no
al servidor
no
al navegador
para decirle
este recurso
es más prioritario
le puedes dar pistas
pero normalmente
lo hace totalmente automático
y lo hace
por justamente
por temas que he comentado
o sea
el navegador sabe
bastante bien
que es más importante
que otro recurso
y hace esas optimizaciones
automáticamente
así que esto
responde también
un poco a Etiete
y a Jorge
que se puede modificar
la prioridad
de hecho
pues tenéis
por ejemplo
el preload
tenéis
el preload sería 1
y es una etiqueta HTML
esto lo podéis ver
¿veis?
link preload
pues también
esta parte del preload
estaría el prefetch
y además de poder poner
preload
le puedes decir
la prioridad
a ver si sale por aquí
no sé si lo pondrá
bueno
pero le puedes indicar
qué prioridad tiene
si tiene una importancia
grande
pequeña
si tiene que
precargarlo
dependiendo de la media query
así que
lo puedes hacer
lo puedes hacer
vale
¿qué más?
¿a qué te refieres
en cuánto miden?
vale
pues a ver
es que este
este elemento
de aquí
cuánto
cuánto
cuánto mide
directamente en la página
en este caso
podemos ver 64
pero claro
si esto
si yo le cambio
la fuente
pongamos que ahora
todos estos elementos
todos los
li
aquí
le vamos a decir
que ahora ocupan
128 píxeles
ahora se ha hecho
más grande
si pregunto
cuánto mide
pues ahora mide más
en píxeles
y esto es
problemático
entre comillas
vale
porque claro
si tú cargases
CSS después
el javascript
y hiciese esta pregunta
pues claro
podría cambiar
¿no?
¿qué más?
¿qué más me comentáis?
y si los streams
se cambiarán
la prioridad
es del tema
es automática
en el navegador
pero se puede optimizar
y
cuando las peticiones
tienen parámetros
esto con función
en javascript
hay manera de saber
cuándo requiere parámetros
esto depende del contrato
de la API
¿vale?
el icono se ha agregado
el último
porque lo añade el navegador
y aunque no le añades
el navegador
de haber algo
también lo cargaría
al último
porque cuando detecta
ese recurso
lo optimiza
para pedirlo
el último
es opcional
es como ese recurso
es bueno
cuando ya tenga tiempo
ya pediré este tipo
de este recurso
¿vale?
vale
bueno creo que más o menos
ya
eran los píxeles
sí de haber algo
que no te lo he dicho
pero este 147
estos son los píxeles
que ocupa
ese elemento
en la pantalla
¿vale?
y el critical CSS
justamente se hace
Miguel para eso
¿no?
se pone el CSS
en línea
arriba del todo
para no tener que esperar
a este recurso
porque este CSS
al ser tan crítico
está bloqueando
que se ejecute
este javascript
aunque se descarga
de forma paralela
luego veremos
que la evaluación
en realidad
sí que se está parando
¿vale?
sí que está paralizándola
¿por qué?
porque como os digo
el CSS es más crítico
se puede descargar cosas
en asíncrono
pero al final
a la hora de
ver
cuál se ejecuta antes
siempre CSS
se ejecuta antes
que el javascript
a no ser
que lo cargues
con javascript
si cargas el CSS
con javascript
o con técnicas
que lo hace asíncrono
pues verás
que sí que lo hace
lo hace después
pero son técnicas
de forma predeterminada
vais a ver
que lo hace así
¿vale?
Byte Lovers
me dice hidratación
sí
exactamente
dolo ácido
se cargan en cascada
a no ser
que se utilicen
diferentes
por defecto
son en cascada
pero
hay diferentes pistas
que le puedes dar
al navegador
para modificar
un poco esa cascada
¿vale?
es básicamente
eso sería el término
¿vale?
madre mía
mata charroas
¿cómo ganas performance?
eso
o sea
eso estaría ahí
todo el día
estaría todo el día
para hablar de
optimización
pero lo podremos ver
iremos viendo
el tema de optimización
¿vale?
esto
fundamento de desarrollo web
todavía nos queda
una cosita
y es que
en el tema de notas
está los formularios
¿vale?
el discord
para añadir el discord
lo que tenéis que hacer
es exclamación discord
y ahí entráis
¿vale?
por ahora
¿todo bien?
¿estáis bien?
¿cómo lo estáis pasando?
yo estoy pegando aquí una
estoy pegando una
una clase
que no veas
a ver
la de inauguración
digamos la primera
es a lo mejor
la más densa
¿vale?
la más complicada
a lo mejor
mucha gente sabe esto
¿vale?
pero semana tras semana
iremos subiendo el nivel
y por supuesto
vamos a ir un poco rápido
porque espero que
durante la semana
lo vaya a ir repasando
poder repasar el vídeo
el vídeo se queda
grabado
podéis repasar
las notas
del bootcamp
o sea que
bueno
que poco a poco
iremos
iremos subiendo de nivel
¿vale?
cuando ya tengamos
javascript y tal
pero bueno
hay que empezar
desde un nivel
que más o menos
todos
nos sintamos cómodos
y a partir de ahí
vamos para arriba
así que
no os lo perdáis
todos los domingos
a las 8 de la tarde
hora española
según el país
es una hora distinta
vamos a por los formularios
formularios
a ver
los formularios
son el temazo
en la web
¿vale?
los formularios al final
lo que nos permiten
es enviar información
al servidor
para justamente
para crear algo
¿no?
hemos visto los get
para recuperar información
del servidor
pero claro
como creo
hemos recuperado las notas
¿vale?
pero yo quiero crear una nota
quiero crear datos
entonces justamente
esto es lo que tienen
los formularios
¿vale?
los formularios
lo que nos permite
es
veremos que hay otras formas
pero
de la forma más básica
hablando de HTML
CSS
lo más básico
para lo que están pensados
los formularios
justamente
nos permite
comunicarnos
con el servidor
para crear cosas
luego veremos
que hay diferentes técnicas
para crear cosas
lo podemos hacer
con mil millones
de diferentes formas
pero
hablando de una forma
fundamental
para que se crea
esta etiqueta semántica
en HTML
es
para enviar datos
al servidor
entonces
hemos visto
que tenemos
el protocolo
HTTP
y hemos visto
el GET
y hemos visto
que es para recuperar
ya os he hecho
un spoiler antes
de que hay diferentes
pero
podemos ver
que está el GET
que es para recuperar
y ahora queremos
hacer un POST
pero ¿cómo podemos
hacer un POST?
¿cómo le decimos
justamente
si estamos aquí
en esta página
cómo hacemos
un POST
al servidor?
porque para el GET
ya hemos visto
que es tan fácil
como poner ahí
el recurso
y ya lo tienes
para hacer un POST
vamos a utilizar
un formulario
de hecho
si vamos al código fuente
que esto es una cosa
también bastante interesante
voy a hacer esto
un poquito más grande
esto sería el HTML
que si no sabes HTML
lo tienes que estudiar
un sitio donde
si no lo he dicho
un sitio que puede ser interesante
para estudiar HTML
puede ser
para nada
se me ha ido el nombre
iba a decir
¿cómo se llama este sitio?
bueno
si me acuerdo
lo diré
¿vale?
pero
es totalmente gratuito
y está bastante bien
aparte de MDN
que es un buen sitio
de documentación
pero hay un curso
que estaba muy bien
de HTML y CSS
que ahora no me sale el nombre
es que tampoco está mal
W3Schools
lo tenéis que pillar
un poco
con pinzas
¿vale?
tened cuidado
con W3Schools
porque tiene mucha información
desactualizada
¿ok?
así que
no utilicéis mucho
W3Schools
CodeLearn
no
pero si es súper mítico
no
CodeLearn no es
no
FreeCodeCamp tampoco
CodeAcademy
ahí está
muchas gracias
CodeAcademy
aunque parece que es de pago
pero tiene un curso
de HTML y CSS
que está bastante bien
y
oh
han cambiado
un poco el diseño
entonces
si no sabéis
de HTML y CSS
os recomiendo mucho este
porque está bastante bien
es muy sencillo
y
la verdad es que
tiene todo lo que necesitáis
habla de elementos
de estructura
tablas
formularios
y HTML semántico
luego de este
pues pasáis al CSS
y
ya estaría
ya tendrías un poco
las bases
este es el HTML
¿vale?
del HTML
mira pues
aquí hay uno que dicen
que da certificado
no sé
este está bien
pues mira
curso de introducción
al desarrollo web
y HTML y CSS
lo han puesto en el chat
pues este tampoco
tiene mala pinta
hombre
un certificado
de HTML y CSS
no sé
no sé hasta dónde
40 horas
madre mía
vale
40 horas
en el curso
perfecto
entonces
lo que vemos aquí
del formulario
lo que nos va a servir
es para enviar datos
¿vale?
así que utilizamos el formulario
le decimos la acción
que tenemos que hacer
y el método
que en este caso es post
ahora esta acción
esto lo que estamos viendo aquí
es una
una dirección
que el servidor
tendrá que comprender
de forma que
sepa leer
tanto
lo que le estamos enviando aquí
que es la nota
¿vale?
este name note
esto es la información
que le va a llegar al servidor
y esta información
la tendrá que tratar el servidor
y crear este recurso
¿vale?
una vez que tenga este recurso
pues nada
igual lo guarda una base de datos
igual hace un montón de cosas
lo importante
para nosotros
por ahora
caja negra
le enviamos esta información
ya sabrá lo que hace el servidor
y nos devolverá
si ha ido todo bien
si no ha ido bien
y ya está
¿vale?
entonces
¿cómo podemos ver
cómo funciona esto?
pues igual
aquí en notas
voy a hacer otra vez
pequeño esto
aquí abajo
es donde está el formulario
este es el formulario
que tenemos aquí
¿vale?
este formulario
tenemos aquí la acción
y al final
pues vamos a poner aquí
en el formulario
no se ve mucho
pero estoy en el formulario
poniendo
probando
¿vale?
mira
alguien ha puesto aquí
hola mi dudez
que grande
hostia
hay cosas muy raras aquí
hola buenos días
hey hey
agrupada
just kidding
you don't have a girlfriend
vale
bueno
el formulario este
que está aquí abajo
súper chiquitito
le voy a dar a enviar
¿vale?
aunque se ve súper chiquito
pero le voy a dar a enviar
y vamos a mirar
en la network
qué es lo que pasa
vamos a darle a enviar
y ya podemos ver
que aquí ha pasado
un montón de cosas
pero lo interesante
está
en que
en realidad
ha hecho
una petición
a new note
que si miramos
ha sido del tipo post
y podemos ver
los datos
que le ha enviado
al formulario
que es
note
probando
probando
¿vale?
y esta nota
justamente
nos la debería
haber creado
de hecho
mira
este
dice
está saludando
a lo que le gusta
vale
pues justo debajo
tenemos lo de probando
¿vale?
tenemos probando
vale
pues eso
justamente
es lo que le hemos enviado
nosotros
de esta forma
estamos viendo
cómo podemos crear
estos datos
ahora
lo que ha hecho
justamente el servidor
es redireccionar
¿vale?
ha redireccionado
porque claro
ha enviado los datos
pero dice
ostras
pero ahora
¿cómo voy a enviar?
¿cómo vas a volver a ver
los datos actualizados?
pues lo que está haciendo
es redireccionar
a barra notes
o sea
nos ha redireccionado
otra vez a la página
se ha recargado
esta página
por eso está viendo
este 302
que lo que ha hecho
es redirigirnos
una vez que ha visto
que esta creación
del dato está bien
lo que ha hecho
es redirigirnos
otra vez
a la página de notas
y ahí es donde ya tenemos
el dato
¿vale?
así que de esta forma
es como está funcionando
de forma más básica
ya veremos que esto
lo podemos hacer
de una forma mucho más elegante
de una forma más dinámica
¿vale?
pero en este caso
lo ha hecho así
ha enviado el dato
lo ha guardado
y luego te ha redirigido
otra vez a la página
para que refrescase
esa información
y ya tuvieses
esa información creada
¿vale?
así es como ha funcionado
el tema del formulario
ahora
claro
¿qué podemos ver?
esto sería lo de Ajax
Ajax
a la hora de crear las notas
lo que se está haciendo aquí
en el JavaScript
es este JavaScript
asíncrono
son peticiones
que le llaman
XML
HTTP
request
pero al final
son peticiones
que son totalmente
asíncronas
lo estábamos viendo
es algo que hace mucho tiempo
que se utiliza
que se llama así
el JavaScript
asíncrono
XML
pero no es tan importante
como se llama
te puedes quedar un poco
con el nombre
que es Ajax
al final lo importante
de esto
es que son
peticiones asíncronas
que se hacen
en un servidor
para recuperar datos
o para guardar datos
o lo que sea
esto es lo que nos permite
y es lo que nos va a permitir
en todo el curso
lo vamos a ver
es el crear las single page applications
es una cosa súper importante
que es básicamente
que nuestras páginas
no necesiten hacer esto
que hemos hecho ahora
del formulario
que hemos tenido a enviar
y entonces nos ha redirigido
y se ha vuelto a actualizar
y tal
sino que lo que ha hecho
lo que podríamos hacer
es utilizar un Ajax
de forma que cada vez
que hagamos una petición
para guardar
en lugar de volver a hacer
toda la redirección
y volver a cargar
todas las peticiones
lo que podría hacer
el JavaScript
es justamente
volver a pedir
todas las notas
y al pedir todas las notas
pues ya tenerlas ahí pintadas
¿vale?
entonces
con esto
esto es la base
para hacer SPAs
con React
y JQC
lo vamos a ver
veremos cómo hacer
páginas
single page application
con React
¿vale?
dicho esto
¿qué más?
nos queda por aquí
aplicaciones de una sola página
que básicamente
es lo que estábamos comentando
con todo lo que hemos visto
hemos visto
cómo podemos modificar
el DOM
cómo podemos
recuperar datos
de forma síncrona
del servidor
utilizando esto
esto veremos
y lo haremos desde cero
y lo veremos
con otra tecnología
mucho más sencilla
esto lo estás utilizando
con una tecnología
que es bastante antigua
que es el XMLHttpRequest
pero ya existen formas
bastante más fáciles
de hacer esto
el tema
es que con todo
lo que hemos visto
en realidad
ya estamos
en realidad
siendo capaces
de hacer una single page application
una single page application
es simplemente
una página
que no refresca
cada vez que necesita
o navegar
para tener nuevos
un nuevo diseño
o para ver
nueva información
o para recuperar
nuevos datos
entonces lo que vamos a ver
es que vamos a ser capaces
solo nos faltaría una cosa
por ver
que sería la API
del History
para poder cambiar
la URL
una vez que podríamos
ver eso
seríamos capaces
de ir cambiando
la URL
para ir navegando
a la vez que cambiamos
y actualizamos
el DOM
con la API
que hemos visto
al final
aunque parece una tontería
esto que hemos visto
de esto que os he comentado antes
esto
es la base
esto es la base
para la SPA
porque lo que va a hacer
es cambiar
información
que tiene actualmente
en el DOM
por una nueva
y lo que vamos a hacer
es cambiar la URL
y eso sería justamente
lo que hace
una single page application
evitar recargar
otra vez la página
como nos ha hecho
el formulario
y básicamente
actualizar el DOM
con la nueva información
eso sería todo
lo que hace
el código 302
justamente
lo que indica
es que ha hecho
una redirección
¿vale?
una 301
hay diferente
status code
status
que os digo
status code
HTML
HTTP
codes
hay una página
a ver si
que es de esta
creo que es
que está bastante bien
por si os interesa
saber más
sobre los status codes
en HTTP
hay un montón
o sea
si os ponéis a mirar
todos
hay un montón
pero os puedo decir
lo más importante
lo más importante
es el 200
que es un ok
201
se suele dar
cuando has hecho
un post
y se ha podido crear
¿vale?
y luego a partir de estos
es el 200
del 300
los importantes
301
302
301
es cuando una página
cambia totalmente
la URL
de una a otra
y dices
no, no
nunca vengas más
a esta URL
porque te voy a enviar
a otra
¿vale?
el 302
es
vale
lo he encontrado
pero en este caso
además ha hecho
una redirección
y por otra parte
todos los que sean
400
de 400 para arriba
son todo errores
hay diferentes tipos
de errores
barriques
no autorizado
404 es el más famoso
que es el not found
cuando no se encuentra
la página
por ejemplo
ay no sé si esto
sí
por ejemplo
esta sería una 404
si miramos
la nube
aunque me ha dado
¿ves?
aquí puedes ver
que me da una 404
aunque yo estoy respondiendo
con información
justamente
para que vea
que la página
existe
o sea
la página funciona
y sé que no existe
esta página
¿vale?
estoy devolviéndole algo
para que esté informado
el usuario
oye no
esto es una página
que no se encuentra
así que bueno
aquí tendríais una lista
que os dejo por aquí
en el chat
por si os interesa
y ya estaría
vale
pues lo de las SPAs
lo iremos viendo
no os preocupéis
que iremos viendo
cómo va haciendo el cambio
de hecho
aquí justamente
nos indican
una versión SPA
la vamos a probar
¿vale?
para que veamos el cambio
la diferencia entre una y otra
vamos a ir a esta URL
esta es la versión normal
¿no?
tenemos example app
barra notes
si vamos a esta versión
example app
barra SPA
lo que vamos a ver aquí
mira tenemos alguien
desde Chile
lo que
voy a abrir también
el network
la voy a dejar abajo
para que sea esto mejor
vale
vamos a abrir la network
y voy a poner aquí
vamos a poner
¿cómo estáis por ahí?
¿vale?
le doy a save
y ahora
lo que ha ocurrido
justamente
es que no ha refrescado
toda la página
fíjate en la diferencia
¿vale?
mira
en esta página
esta es la normal
no es SPA
en esta página
vamos a poner algo aquí
le voy a dar a save
y vas a notar
cómo se refresca
bueno
más que notarlo
lo vamos a ver
porque las herramientas
de desarrollo
son súper importantes
que las dominéis
las tenéis que dominar
¿vale?
vamos a la network
¿vale?
y vas a ver
que cuando le dé aquí
cuando le dé a save
vais a ver
vale
has visto
que ha ido hacia arriba
que se ha refrescado
toda la página
y mira todas las requests
que ha hecho
¿no?
ha hecho
a ver
vamos por aquí
ha hecho lo de new node
esto le ha redirigido a nodes
y ha recargado toda vez
todos los recursos
esto justamente
es lo que vamos a querer evitar
cuando hagamos una single page application
porque queremos evitar
que el usuario
tenga que volver a descargarse
los recursos
que ya ha descargado
entonces si lo único que queremos
es ver esa diferencia
de vale
añadir una nota
devuélveme las nuevas notas
ya está
eso lo está haciendo esta
y lo vamos a ver ahora
voy a hacer aquí
voy a hacer la request
hola en twitch
vale
le voy a dar a salvar
y fíjate
que solo ha hecho
una request
la única que ha hecho aquí
es
y fíjate que ha devuelto
un 201
que es justamente
lo que os decía
que se podía hacer una petición
para crear un recurso
y esto
era con el 201
lo que te devolvía
es vale
he podido
crear este recurso
sin ningún problema
vale
entonces esto lo que ha hecho
es no recargar nada
y esto
pues tiene una ventaja
obvia
en la experiencia
del usuario
lo que estamos viendo
es que ha sido inmediata
así que de esta forma
lo que tenemos
es que el usuario
no tiene que recargar
todos los recursos
y al final
lo que nos ayuda
es que el usuario
se quede donde está
vale
que diga no no
si no no pasa nada
no tienes que volver a recargar
imagínate en un móvil
esto que va
puede ir más lento
y ve como recarga
toda la página
y tal
lo que siempre vamos a querer
es que sea una reacción inmediata
para el usuario
esto lo puedes ver
super fácil en facebook
cuando le das un like
cuando das un me gusta
imagínate en twitter
cada vez que dices
un me gusta
y recargase toda la página
sería un locurón
incluso cuando se crea un tweet
hay muchas veces
que ni siquiera
se recarga toda la página
o pones un comentario
tampoco se recarga toda la página
esto es justamente
lo que vamos a intentar conseguir
con la single page application
así que
con esto
ya tenemos
el tema
de la single page application
podríamos ver un poco
la diferencia
la diferencia
voy a recargar esta página
la diferencia va a estar
en el javascript
y vais a ver que javascript
es lo que nos va a dar la vida
para poder hacer
este tipo de experiencias
si vamos a la respuesta
aquí podemos ver
que ya esto está cambiando
un poco
es verdad que tenemos esto
de
xml
http request
para recuperarlas
pero además
ha añadido otra
para enviar al servidor
esta información
y esto lo está haciendo
sin el formulario
que estábamos viendo antes
ahora
eso que hacía el formulario
con el marcado html
lo está haciendo
básicamente
con javascript
y de esta forma
es capaz
de hacerlo
sin necesidad
de actualizar toda la página
esto es super importante
y esto es una cosa
que iremos viendo
y que vamos a estar haciendo
conforme vayamos creando
APIs
veamos en React
cómo podemos hacer
que esto cree el recurso
y actualizarlo
de hecho la magia
está justamente aquí
cuando esta nota
la crea
no solo la envía
al servidor
sino que lo que está haciendo
es guardarla aquí
y redibujar las notas
otra vez
entonces te está dando
la falsa sensación
de que esta información
viene del servidor
pero en realidad
no viene del servidor
lo que está haciendo
es que como has creado
esa nota
con ese texto
lo está dibujando
con ese texto
y ya está
está simulando
que ha venido
del servidor
pero no ha venido
del servidor
¿vale?
muy bien
bueno
aquí tiene un tema
de librerías
en javascript
esto es un mundo
y os voy a comentar
un poco
¿vale?
todo lo que hemos visto
hasta ahora
que tampoco hemos visto
mucho de javascript
pero es lo que se llama
como vanilla
javascript
¿vale?
o vanilla
o vainilla
o como quieras decir
pero básicamente
lo que quiere decir
es javascript
en crudo
todo lo que vemos aquí
esta manipulación
del DOM
que hemos podido ver
todo este
esto javascript
es lo que se le conoce
como vanilla javascript
es javascript
simple
puro
sencillo
tal cual
no tenemos
ningún tipo de librería
ni framework
que nos esté ayudando
a manipular el DOM
estamos manualmente
recuperando del documento
el elemento
que tiene la ID
con nodes form
y estamos manipulándolo
de forma
pues cruda
¿vale?
sin ningún tipo de ayuda
digamos
entonces
¿qué pasa con esto?
que esto es
un coñazo
¿vale?
esto es un coñazo
es un coñazo
porque obviamente
el código que hay que hacer
para mantener esto
es demasiado
de hecho esto
algo tan sencillo
como esto de las notas
estamos viendo
que tiene 61 líneas
y es difícil de leer
ahora mismo
no es importante
que entiendas
el contenido
de este javascript
ya lo iremos viendo
pero el tema es
que esto es difícil
de mantener
a lo largo del tiempo
ha habido
diferentes formas
de trabajar
con el DOM
no como
no solo como yo
te he enseñado
que es importante
sino que ha habido
un montón de formas
una de ellas
la más importante
que ya no se utiliza tanto
es con jQuery
¿vale?
jQuery
cuando en su día
pues se creó
era una solución
muy buena
no sé si conoces jQuery
si le tienes muchísimo cariño
pero lo que sí que te puedo decir
es que jQuery
ya no es
digamos
la solución
por defecto
que debería pasarte
por la cabeza
cuando quieras empezar
un proyecto de desarrollo web
eso no quiere decir
que sea mala idea
ni que esté mal
ni que
porque hay un montón
un montón de webs
que utilizan jQuery
y creo que puede ser interesante
aprenderlo
no es muy difícil
de aprender
al menos
esto no
el 20-80
el tema de Pareto
el 80%
de jQuery
lo puedes aprender
en el 20% del tiempo
quizás el 20% restante
de jQuery
sí que es verdad
que puede ser un poco coñazo
no es
la forma recomendada
hoy en día
de trabajar
con páginas web
porque digamos que
la forma que tiene
de tratar el DOM
es una forma
muy anticuada
muy
old school
aquí por ejemplo
mira
aquí para que te hagas una idea
aquí es como tenemos
cómo hacer una llamada a AJAX
aquí puedes ver la diferencia
que bien se hace con esto
que mejor se hace con eso
que no como lo hacíamos
aquí
¿no?
con todo este churro
que cualquiera entiende
que parece que de verdad
eres hacker
¿vale?
entonces
jQuery
y cualquier librería
justamente lo que te dan
es una capa de abstracción
que te ayuda
a simplificar el desarrollo
y que sea mucho más mantenible
que sea mucho más fácil
de entender
que sea escalable
muchas cosas
porque al final
si lo haces en vanilla todo
pues es difícil
de que al final
eso funcione correctamente
o que escribas demasiado código
que sea difícil
mira
tenemos aquí gente que dice
pero hay gente
que sigue pidiendo jQuery
en cualquier trabajo programador
lo siguen pidiendo
si
es verdad
hay empresas que todavía
lo piden como requisito
y ¿por qué será esto?
porque hay muchas empresas
uno
WordPress
lo utiliza en sus proyectos
y por lo tanto
WordPress
no sé si ya lo han quitado
pero bueno
casi todas las instalaciones
de WordPress
utilizan jQuery todavía
y luego hay muchas páginas
que tienen
código antiguo
que al final
pues utilizan todavía jQuery
porque era la forma
por defecto
pero por eso os digo
si ahora
se empieza un desarrollo
nuevo
ya os digo yo
que si una empresa
elige jQuery
ya os digo yo
que es una mala decisión
una muy mala decisión
así que
jQuery
fue muy interesante
en su momento
porque no solo
no era fácil
manipular el DOM
es que lo que os he enseñado
esto
este query selector
que tenéis aquí
esto no existía
esto no existía antes
esto se creó
gracias a jQuery
entonces
¿qué pasa?
claro nosotros teníamos antes
que teníamos
teníamos el getElementById
que esto todavía funciona
que es para recuperar
un elemento por su ID
teníamos también
get
¿cómo era?
tag
no
class
by class
bueno ya no me acuerdo
getElementsByClassName
para recuperarlos por clase
por tagName
para recuperar por tag
era un coñazo
¿vale?
¿qué pasa?
que jQuery
tenía esto
justamente
que podríamos hacer
algo parecido
lo que hemos hecho antes
y de esta forma
podía recuperar un elemento
de una forma tan sencilla
y tan corta
esto
lo que le dio
es una ventaja brutal
¿vale?
pero
¿qué pasa?
que ahora ya
no tiene tanto sentido
cuando tenemos una API
que es igual de potente
que la que nos ofrecía jQuery
y que ya no da
ninguna ventaja
más allá de que puedes escribir
un poquito menos de código
pero hay otras
como React
que te viene con un paradigma
totalmente nuevo
que lo veremos aquí
en el bootcamp
en todos los domingos
que no te lo pierdas
y lo que vamos a hacer
es descubrir
por qué React
es un paradigma
superior a por ejemplo
jQuery
digamos que jQuery
es un paradigma
en el que tú le vas diciendo
paso por paso
lo que tiene que hacer
recupera este elemento
haz esto
haz lo otro
y con React
en realidad
le damos la vuelta a la tortilla
y somos declarativos
¿vale?
le decimos lo que queremos que pase
no los pasos que tiene que hacer
para que ocurra
eso ¿vale?
entonces
después de jQuery
que ya os digo que jQuery
no lo vamos a ver
en el bootcamp
no es una cosa
en el bootcamp no
en Twitch puede ser
porque tengo ideas
interesantes
¿vale?
pero no vamos a ver jQuery
en el bootcamp
en los domingos
nunca vamos a tocar jQuery
¿vale?
lo digo porque si es algo
que te interesa
por los motivos que te he explicado
pues igual le puedes echar un vistazo
y ya está
pero aquí en el bootcamp
no lo vamos a ver
después de jQuery
pues sé que pasa
que el frontend fue tomando
cada vez más relevancia
¿vale?
se iba haciendo cada vez más grande
el frontend más grande
hemos visto una aplicación
bastante sencilla
y ya hemos visto que las SPA
hacían que las aplicaciones
fuesen cada vez en el frontend
mucho más potentes
porque cosas que hacías
a lo mejor en el servidor
ahora lo hacías en el frontend
entonces pues aparecieron
nuevos desarrollos
en 2012
Backbone.js
Backbone.js
te da una estructura
para crear una aplicación web
utilizando pues un patrón
en concreto
y te daba modelos
vistas
colecciones
controladores
bueno tampoco Backbone
es lo que se utilizaría
hoy en día
¿vale?
pero hubo un montón
un montón de proyectos
que se utilizaron con Backbone
y era porque justamente
daba un paso adecuado
en la buena dirección
para separar por capas
lo que era el frontend
¿vale?
entonces a partir de Backbone
después digamos que ya tenemos
la nueva hornada
de frameworks
y maravillosos
como los que conocemos
que son
React
Angular
Vue.js
y Svelte
esos serían un poco
los que tendríamos
Angular empezó
regular
¿vale?
¿por qué?
porque Angular sacó una versión
y después en la versión mayor
fue totalmente distinta
y hubo una ruptura
la versión 1
que sería Angular.js
eso ya no se utiliza
así que de esa te puedes olvidar
pero a partir de Angular 2
que no es retrocompatible
con la primera
pues entonces sí que fue evolucionando
y ya fue más interesante
Angular
sería uno de los frameworks
que a día de hoy
sí que se utiliza
pero tampoco lo vamos a ver
en este bootcamp
¿por qué no vamos a ver
Angular en este bootcamp?
no lo vamos a ver
porque no podemos ver todos
eso para empezar
y porque creo
yo sinceramente
y en el bootcamp
pues están de acuerdo
que React.js es actualmente
la tecnología más utilizada
o de las más demandadas
a la hora de buscar trabajo
¿vale?
React.js es el framework
por excelencia
o librería o biblioteca
como le quieras llamar
por excelencia
para construir interfaces de usuario
no digo que sea la única
no digo que vaya a ser para siempre
ya hemos visto que jQuery
se utilizó muchísimo
¿no?
y al final no
pues todo evoluciona
y no iba a ser jQuery menos
y Backbone también estuvo
al alza mucho tiempo
Angular también al principio
empezó muy bien
y ahora React
y el día de mañana
quién sabe lo que puede ser
lo importante es que
a día de hoy
lo que está demandando
la React Jobs 2020
vamos a ver
lo que se está utilizando más
a día de hoy es React
también podemos ver
en NPM Trends
cuál sería
cuál se está utilizando más
podemos comparar
ah mira aquí tenemos una
Angular con React
si miramos así
pues el verde sería React
y podemos ver que está
a distancia del resto
esto no significa
que en tu país
o en tu zona
no haya
a lo mejor hay desarrollos
en Angular
que seguro que hay demanda
y hay mucha demanda de Angular
y hay mucha demanda de Vue también
y pueden ser buenas soluciones
pero React
además para empezar
creo que está muy bien
y luego puede dar salto
a otro framework
como puede ser React
puede ser Svelte
puede ser lo que quieras
pero bueno
que sepas un poco
cuál es la razón
por la que se hace esto
hay casi todos los bootcamps
justamente enseñan este stack
con React
porque suele ser el más demandado
pero hay algún bootcamp
que he visto
que ya están haciéndolo con Vue
lo cual me parece muy interesante
y ya está
esa es la razón
por la que estamos mirando React
además React
para el que no lo sepa
aunque lo hablaremos más adelante
está desarrollada por Facebook
lo utiliza Facebook
en su página web
en producción
entonces
digamos que tiene
una gran empresa detrás
que la está apoyando
le está dando desarrollo
y además tiene una evolución
brutal
y tiene frameworks muy potentes
que no lo veremos en el bootcamp
pero sí que en Twitch
lo vemos cada dos por tres
que es Next Yes
es un framework
que está desarrollado
por la compañía Vercell
un framework de React
que lo que te permite
es tener una experiencia
de desarrollo brutal
utilizando React
y que te soluciona
un montón de cosas
desde inicio
sin configuración
esa sería un poco
la razón
entonces
aquí mira
aquí lo comenta
que dice que el estado de React
parece sólido
pero el mundo de JavaScript
cambia constantemente
que no se diga
que yo no avise
¿vale?
lo importante
yo creo en el bootcamp
ahora React
es buena idea
aprenderlo
así que
no te preocupes
no es una tecnología
que vas a aprender
y vas a olvidar
rápidamente
pero es verdad que
Vue.js
ahora Svelte
están captando interés
Vue.js
al final
bebe mucho
es también un framework
de JavaScript
que nos permite
tener cosas muy parecidas
a las de React
y el tema
es que bebe
del propio React
y lo intenta mejorar
en diferentes aspectos
de hecho hay gente
que dice que la curva
de aprendizaje
es mucho más pequeña
lo cual
puede ser interesante
luego tendríamos
también Svelte
que por cierto
tengo un curso
en YouTube
así que si te quieres
spoilear
es bastante
si sabes HTML
y CSS
Svelte
es bastante
sencillo
de aprender
es bastante sencillo
de aprender
porque al final
lo que utiliza
son conceptos
muy sencillos
y utiliza
HTML, CSS
y JavaScript
hay que aprender
un poquito de plantillas
pero nada
muy difícil
tengo un curso completo
por si te animas
y en la última
State of JS
que es una encuesta
de JavaScript
dijeron que
se ve que va un poco
al alza
de interés
y tal
esta sería otra opción
y otras opciones
que tampoco vamos a ver
en el bootcamp
pero que cada vez
tienen más relevancia
por ejemplo
es Lead Element
que sí que está basado más
en la plataforma
que está intentando
utilizar los Web Components
que igual iremos viendo
en el bootcamp
pero no los utilizaremos
porque nos basaremos
más en React
y React no se lleva
muy bien
con los Web Components
a día de hoy
pero Web Components
al final
es una forma
que tiene la propia
plataforma
de crear
componentes
reutilizables
de UI
con lógica
utilizando
pues la tecnología
de la plataforma
lo cual hace
que no tengas
que descargar
tantos
frameworks
ni librerías
en tu aplicación
tampoco lo veremos
en el bootcamp
pero
si estás atento
a Twitch
pues seguramente
a Twitch
o en YouTube
pues seguramente
alguna cosa veremos
porque creo que
el desarrollo
Web y Full Stack
va por ahí
así que
eso sería un poco
en la parte
de librerías
JavaScript
hablando del frontend
pero qué pasa
porque estamos
haciendo un bootcamp
empezamos este bootcamp
que es Full Stack
y qué se refiere
esto de ser
Full Stack
a la hora
de hablar
de Full Stack
es una palabra
que está muy de moda
y que nadie sabe
exactamente
qué quiere decir
Full Stack
porque Full Stack
normalmente se refiere
a que haces
cosas en backend
y en frontend
hay gente que cree
que Full Stack
eso es incompleto
porque deberías
saber más cosas
al final
Full Stack
nosotros
como lo vamos a ver
en este bootcamp
quiere decir
que vamos a hacer
tanto frontend
como backend
y vamos a utilizar
las mismas tecnologías
vamos a utilizar
JavaScript
en este caso
en el frontend
pues veremos
JavaScript y tal
con las librerías
de las que hemos estado
hablando
con React
vamos a ver también
pues Redux
para el tema del estado
y en el backend
vamos a utilizar
Node.js
que al final
es un runtime
es algo que puede ejecutar
igual que el navegador
ejecuta JavaScript
lo que vamos a necesitar
es tener como un navegador
en el servidor
y es justamente
lo que ocurre
que Node.js
es el motor de Chrome
pero en el servidor
y de esta forma
ejecuta JavaScript
en el servidor
así que
estas dos capas
por un lado
el backend
y por un lado
el frontend
estas dos capas
son las que vamos a
dominar en este bootcamp
el frontend
lo que ve más el usuario
y el backend
lo que está más oculto
por ahí
estas son las dos
que vamos a ver
vamos a empezar
sobre todo
con el frontend
pero luego
poco a poco
tendremos que crear
APIs
tendremos que crear
cosas
para ver esto
y eso
lo haremos en el backend
lo haremos con Node.js
lo haremos con Express
que es también
a su vez
un framework
así que
vamos a hacer
un bootcamp completo
full stack
para ver todo
y ser nosotros
totalmente independientes
para crear cualquier tipo
de aplicación
entonces
¿cómo estáis?
¿cómo va eso?
¿cómo os encontráis?
¿cómo lo veis?
justamente mira
ahora que comentáis esto
alguien decía
vamos a ver Node.js
pero
alguien diría
pero es que en el servidor
solo podemos utilizar Node.js
en el servidor
en la parte del backend
con JavaScript
hay diferentes alternativas
una es Node.js
pero también tendríamos
Deno
bueno no sé si
Deno
vale
Deno es la alternativa
a Node.js
de hecho hay un juego
de palabras
de no de
Deno
porque es del creador
de Node.js
que ha creado Dino
en realidad
como se pronuncia
es Dino
vale
entonces
Dino
no solo puedes escribir
en JavaScript
sino también en TypeScript
y de hecho
TypeScript
sí que es una cosa
que vamos a ver
en el bootcamp
TypeScript
al final es un superset
que puedes
escribir
JavaScript
pero con tipos
veremos más adelante
qué es esto de los tipos
qué quiere decir
para qué es útil
por qué lo deberíamos utilizar
entonces
más adelante
después del bootcamp
si te apetece
podemos
de hecho iremos viendo Dino
en Twitch
y en YouTube
seguro
pero si te apetece
que sepas que existe
Dino como alternativa
lo que pasa es que
las APIs que te propone
Dino
no son exactamente
las mismas
que tiene Node.js
y el paradigma
es un poco distinto
pero bueno
qué lo puedes hacer
también
el backend
lo podrías hacer
en cualquier lenguaje
pero veremos
que obviamente
hay una ventaja
si hacemos exactamente
el frontend
y el backend
con el mismo idioma
con JavaScript
y es que podríamos
reutilizar código
en ambos sitios
así que eso es una
de las grandes ventajas
vale
y no tengáis miedo
al TypeScript
de hecho yo no soy
un gran
no soy muy bueno
en TypeScript
porque no he tenido
mucho tiempo
de trabajo
con TypeScript
así que lo voy a aprender
con vosotros también
qué preguntas
tenéis por aquí
vamos a preguntar
qué proyecto sería
el final
al bootcamp
lo vamos a ver
semana tras semana
y lo haremos
justo como lo hacen
en el bootcamp
yo no soy de Java
bueno
TypeScript es Java
con JavaScript
si sabes Java
es sencillo
es verdad
no hay que inscribirse
a este bootcamp
no hay que inscribirse
vale
o sea ya estaría
solo vienes aquí a Twitch
todos los domingos
a las 8 de la tarde
hora española
y ya estarías
y te suscribes
sigues
y ya está
vale
¿cuál es el proyecto
que se creará?
pues la verdad
ni lo he visto
pero al final
será una aplicación
que tendrá
todo tipo
de
tendrá
de todo
o sea
vamos a hacer
la app
y le vamos a hacer
todo
ni lo he visto
¿cuál es la app?
lo vamos a descubrir juntos
o sea que
no sé
si se puede ver
si alguien
ha hecho el bootcamp
que nos lo comente
mira
parece que es una lista
de blogs
una blog list
una lista de blogs
bueno
parece interesante
una lista de blogs
parece que es lo que vamos a hacer
la curva aprendizaje
de TypeScript
muy bajita
la curva principal
luego a partir de ahí
cuanto más difícil
puedes hacer cosas
muy complejas
en TypeScript
y ahí es donde entra
lo complicado
¿vale?
¿tiempo aproximado
de duración del bootcamp?
yo he calculado
a Gosho
tres meses
veremos
veremos
no lo sé
es la primera vez
que lo hacemos
lo descubriremos
poco a poco
pero hasta que no lo terminemos
no vamos a parar
vamos a estar aquí
todos los domingos
todos los domingos
vamos a estar aquí
haciéndolo
así que bueno
la parte de TypeScript
fue con la que más sufrí
en general
son varios proyectos pequeños
¿vale?
se hacen varios proyectos pequeños
¿vale?
así que
y se van agregando
varias funcionalidades
que nos lo dice
endwithleox
y pues nada
sufriremos en TypeScript
pero lo sacaremos
estrategias de data fetching
SWR o React Query
en principio
no vamos a ver
en principio
pero
igual
fuera del bootcamp
sí que lo veremos
¿vale?
estaremos con esto
entre dos y tres meses
si son once partes
pues sí
tres meses
es lo que he calculado
más o menos
más o menos
si tiene que ser más
será más
lo importante es que
cada domingo estaremos aquí
GraphQL
GraphQL es un lenguaje
para hacer consultas
al servidor
eso es lo que es
a partir de ahí
obviamente
puedes crear
un servidor
que entiende
pero mira
esa query language
para tu API
para hacer consultas
a tu API
a partir de aquí
¿qué puedes hacer?
al final
lo puedes hacer servir
como proxy
para que hable
con diferentes
uy
no funciona
GraphQL
para llamarse
con diferentes APIs
¿vale?
y que haga transformaciones
haga
recoja datos
de diferentes fuentes
de datos
haga manipulaciones
de los datos
cosas así
¿vale?
dos horas
todos los domingos
todos los domingos
dos horas
vamos a estar aquí
¿recomiendas revisar la clase
antes de llegar preparado
al domingo?
puede ser
rudef
pero tampoco
quiero que os aburráis
a ver si
lo vais a preparar mucho
y luego
aprovechemos más días
a la semana
Vedas Keys
la verdad es que
lo que vamos a hacer
a lo largo de la semana
veremos
veremos otras causas
en Twitch
haré otros desarrollos
si os queréis pasar
estáis más que invitados
no vamos a ver Gulan
¿vale?
no vamos a enfocar
en todo esto de JavaScript
si hablaremos de APIs
¿vale?
vamos a ver tema de APIs
vamos a crear una API
con Express
por supuesto
y os explicaré
de Express
porque
es buena idea
pero también
que deberíais dominar
alternativas
¿qué más?
y si lo hacemos una vez
a la semana
y los domingos
sí Dani
vamos a hacerlo
en principio
un día a la semana
y serán todos los domingos
y lo voy a subir luego
a YouTube
Enrique
y todas las clases
son de dos horas
y vamos a
y seguidme en YouTube
que es midu.tuve
y ahí es donde lo subiré
y de esta forma
no os lo perderéis
¿vale?
no os perderéis
el siguiente que subo aquí
o vídeo cualquiera
porque voy subiendo
un montón de vídeos
GraphFluel
no reemplaza Redux
¿vale?
Shadow
y esto lo veremos
lo explicaremos
pero no reemplaza Redux
Redux
es para manejar estado
de hecho puedes utilizar
GraphQL
para hacer
peticiones a las APIs
y eso guardarlo en Redux
otra cosa
es que está el cliente
de Apolo
que es un cliente
de GraphQL
que te hace cosas así
para guardar cosas
en estado
y tener un estado global
¿vale?
pero no reemplaza
GraphQL a Redux
de hecho
no tiene nada que ver
una cosa
veremos hooks
y veremos custom hooks
el día que hago directos
R Palacios
es seguro
el domingo
a las 8 de la tarde
a partir de ahí
de lunes a sábado
suelo hacer directos
pero no los tengo
no los tengo planeados
voy haciendo de vez en cuando
no había pensado
en usar Postman
pero lo utilizaremos
¿vale?
porque me parece
una herramienta
muy interesante
y puede ser
que el día de mañana
JavaScript incorpore
cosas que estamos viendo
en TypeScript
no todo
pero creo que algunas cosas
es posible que sí
¿qué más?
¿apartado de un disco
para el bootcamp?
Cruster
a ver
hay un apartado
para el bootcamp
en Discord
pero es para
suscriptores
tanto de Twitch
como de Patreon
¿por qué está hecho así?
porque no puedo
dar soporte
a tanta gente
entonces
los que sean suscriptores
tampoco es que a lo mejor
pueda estar todo el día
pero al menos
está un poco más acotado
si no
sería demasiado
sería muy difícil
no sé si utilizamos
Redux Toolkit
intentaré que sí
Apotoxin
lo intentaré
pero no lo sé
creo que
creo que no
lo tiene el bootcamp
pero veremos
si lo hacemos
¿vale?
y si os dejaré
challenges
¿vale?
no os preocupéis
¿qué más?
¿qué más?
es que de repente
veremos testing
no os preocupéis
veremos testing
React
Testing Library
vamos a ver
testing en Express
vamos a ver Jest
vamos a ver Fetch
con Async Await
DevOps
vamos a ver al final
con GitHub Actions
¿vale?
lo vamos a ver al final
código
no os preocupéis
la semana que viene
empezamos con el código
ya os digo que hoy
era Fundamento de Desarrollo Web
pero la semana que viene
la semana que viene
vamos a ver código
seguro
así que
no os preocupéis
que veremos código
vale
ahora que os he leído a todos
R Palacios
ahora mismo
no hago entrenamiento
de COVID Interviews
pero los que se están
los que se hagan en Patreon
hoy
bueno hoy
y creo que
en todo el mes
vamos a tener un
one to one
de 15 minutos
para
hasta
35 días
one and one
de 15 minutos
que ahí
pues me puedes comentar
lo que sea
y a lo mejor
en Twitch
sí que hago
pues
algo de hablar
de entrevistas de trabajo
y ideas y cosas así
y usaré Visual Studio Code
por supuesto
el Rodra 14
no te preocupes
vamos a ver backend
y vamos a hacerlo aquí
con Node.js y todo
y sí
tenéis que tener instalado
Visual Studio Code
y por supuesto
las
las
Chrome
y todo esto
todo lo demás
Node.js y NPM
pero eso lo veremos
cómo instalarlo aquí
vale
los conocimientos previos
HTML y CSS
como os he dicho
y
y poca cosa más
a ver
y programación en general
qué es un loop
qué es un condicional
cosas así
pues estaría bien
vale
¿por qué?
porque a lo mejor lo comento
pero muy por encima
no tenemos tiempo
de decir
un loop es tal
a lo mejor lo comento
una vez de pasada
y tal
así que
vale
y en la próxima clase
¿qué vamos a hacer
en la próxima clase?
a ver
no he terminado esta
me queda un poquito todavía
en la próxima clase
vamos a hacer ya React
es la introducción de React
la semana que viene
vamos a React a saco
vamos a hablar de React
vamos a hacer ya
vamos a empezar con React
y bueno
perdemos un poquito de JavaScript
porque
pero muy rápido
lo de JavaScript
vamos a ver
qué son las variables
un array
los objetos y tal
pero esto lo haremos rápido
y ya pasaremos a React
¿vale?
así que
lo siguiente de esto
esto es lo de JavaScript
pero luego ya pasamos
rápido a React
así que
bueno
si lo queréis mirar
de JavaScript
para tenerlo en cuenta
pues genial
pero le vamos a dar cañita
a lo de JavaScript
variables
array
las cosas básicas
funciones
lo que se necesita
justamente para crear
para crear cosas
con JavaScript
con React
y ya está
pero bueno
esto
la siguiente clase
va a ser código ya
va a ser código a saco
vamos a programar
a saco
ya
desde el principio
¿vale?
así que
que lo sepáis
os explico
unas cositas
del final
¿vale?
la fatiga de JavaScript
y miramos los ejercicios
y a lo mejor
hago uno
y ya luego
os lo paso a vosotros
os comento una cosa
la fatiga de JavaScript
básicamente
la fatiga de JavaScript
lo que quiere decir
es que
hay demasiadas cosas
en el ecosistema de JavaScript
es como que
nunca
nunca para
el mundo del desarrollo
en JavaScript
¿no?
cada día dicen
que sale un nuevo framework
que suele
sale
una nueva forma
de hacer las cosas
y es que
JavaScript
por un lado
es bueno
porque esto quiere decir
que JavaScript
está vivo
¿vale?
que no para
pero por otro lado
pues te puedes fatigar
¿no?
te puedes cansar
te puede dar miedo
te puedes acabar
hasta los
porque claro
nunca parece que
encajas
¿no?
parece que nunca llegas
a estar arriba
¿no?
y al final
lo que pasa
es que dices
ostras
¿alguna vez lo voy a aprender todo?
bueno
lo que te voy a decir
es que
no te preocupes
no pasa nada
o sea
poco a poco
al final
no hace falta
que sepas todo
sobre JavaScript
al final
lo importante
es que sepas
lo suficiente
una base
para ir evolucionando
y lo más bonito
que tiene JavaScript
es que nunca terminas
de aprender de todo
porque siempre sale
un framework
pues ahora ha salido
Svelte
y es súper interesante
luego sale esto
luego sale otro
entonces
no te agobies
es lo que te voy a decir
en el bootcamp
vamos a ver diferentes cosas
sobre JavaScript
diferentes tecnologías
y yo diría
que esto es
lo mismo que he dicho antes
pareto
80-20
vamos a ver el 80%
y el 20% restante
es posible
que sea bastante
y sea muy difícil
de aprender
pero bueno
no te agobies
siempre hay cosas
por aprender
a mí me pasa
vamos a verlo
en el bootcamp
yo hay cosas
que no domino
y las vamos a hacer
en el bootcamp
y las iré aprendiendo
con vosotros
así que
no os preocupéis
tampoco
os agobiéis
con la falsa idea
de que
cada día sale
un framework nuevo
en JavaScript
eso que se dice
suele ser una chorrada
con piano
y lo suele decir
gente que está
bastante desconectada
del desarrollo
la realidad
para que os hagáis una idea
es que React.js
es de
el año
es de hace 7 años
es de
el 2000
2013
¿vale?
y vamos a aprender
y está ahora a tope
ahora
no es de la semana pasada
React.js
pongamos
el más trendy
que es Svelte
os he hablado antes de Svelte
y os he dicho
Svelte lo está petando ahora
Svelte
es de 2016
no ha salido
la semana pasada
¿vale?
entonces
cuando vemos
este tipo de tecnologías
a veces somos nosotros mismos
los que nos ponemos
esta carga encima
Webpack también
tiene muchísimos años
hay un montón
de cosas
¿vale?
pero
no os preocupéis
porque
realmente son tecnologías
que están asentadas
y luego duran años
en el caso de React
ya os digo
tiene 7 años
React
la más nueva
la más trendy
la que parece que
el nuevo framework
que no sé qué
es Svelte
y tiene 4 años
ya
que siempre salen
frameworks en GitHub
y que no sé qué
claro
siempre
pero eso
como puede salir
cualquier cosa
pero frameworks serios
que tengas que aprender
por los que preocuparte
salen cada 5 años
¿vale?
y eso es normal
entonces
dicho esto
lo que te quiero decir
es que React
lo que vamos a aprender
en este Bootcamp
es
es bastante estable
que es verdad
que JavaScript
es un ecosistema vivo
que no para
de evolucionar
pero que
lo que vas a aprender
te va a durar
mucho tiempo
¿vale?
no es que
la semana que viene
ya no
no pasa nada
no te preocupes
esto que vas a aprender
es algo que se está
utilizando de hace años
y que va a seguir
utilizándose
desde hace
para muchos años
así que
no os preocupéis
¿vale?
esto es lo que
lo que os quiero decir
de la fatiga de JavaScript
que lo veremos
entre todos
y que
que no
que no os preocupéis
y que cuando la gente
os diga eso
de que
pero en que JavaScript
sale uno a la semana
es que no
no están
están muy desconectados
de la realidad
del ecosistema en JavaScript
¿vale?
pues eso
entonces
aquí ya tenemos
unos ejercicios
que habría que hacer
y que habría que
si estáis registrados
en el sistema de envíos
lo podéis hacer
el sistema de envíos
tendrías que estar
tendrías que estar
logados y tal
bueno
nosotros
no vamos a hacer nada
del sistema de envíos
yo lo haré
en un repositorio
de GitHub
y ahí lo
lo publicaremos
seguramente
estos ejercicios
lo que os voy a
yo lo voy a hacer
para crearlo
y tenerlo
de hecho
voy a poner aquí
en modo dev
de hecho así
vamos a ver por primera vez
un poco de GitHub
y de Git
y de GitHub
y si alguien tiene dudas
pues lo puede revisar
esta semana
para la semana que viene
¿vale?
entonces
ya nos dice un poco
la estructura de directorios
aquí que deberíamos tener
parte cero
parte uno
cause info
no sé qué
no sé cuánto
entonces
como esto es la parte cero
lo primero que voy a hacer aquí
es crear una carpeta
que le voy a llamar
midu bootcamp
¿vale?
midu bootcamp
y aquí en el midu bootcamp
lo que voy a hacer
es crear esta carpeta
parte cero
ahora voy a abrir
el midu bootcamp
en mi Visual Studio Code
¿vale?
aquí tengo mi carpeta
parte cero
y vamos a ver
lo que nos está pidiendo
¿vale?
nos dice
los ejercicios
envían
bueno
nosotros no lo vamos a enviar
si lo queréis enviar
pues ya sabéis
vais y lo enviáis
y ya está
revisa los conceptos básicos
de HTML
leyendo tal
este ejercicio
nos envía GitHub
bueno
este no hay que hacer
pero mira
aquí hay un tutorial
que está bastante bien
de HTML
lo podéis poner en castellano
aquí arriba a la derecha
por si queréis revisar
cualquier cosa
os recomiendo
que lo pongáis en castellano
está bastante
bastante actualizado
estas son cosas muy básicas
que por eso
nos las hemos saltado
pero si no las dominas
ya sabes
las miras
que lo vas a necesitar
luego CSS
exactamente lo mismo
revisar
pues nada
aquí tenéis otro igual
ponéis en castellano
lo miráis
formularios HTML
nada
vale
aquí sí que nos dan uno
en el capítulo
cargando una página
que contiene JavaScript revisada
la cadena de eventos
causada al abrir la página
vale
aquí lo que quieren
es que hagamos un diagrama
vale
¿por qué?
para que entendáis
exactamente
cómo funcionan las requests
aquí
si copiáis todo este código
y lo ponéis aquí
lo que vais a hacer
es
lo que veis
nos está generando
el diagrama
que nos han puesto antes
entonces
lo que nos está pidiendo
básicamente
es crear
un diagrama
que sea similar
pero
para cuando
creamos una nota
o sea
por ejemplo
lo que nos está diciendo aquí
es
voy a eliminar
bueno
puedo hacer
voy a eliminar
esto
que elimino
voy a quitar esto
no sé si esto
se puede comentar
sí
se puede comentar
mira
se puede comentar
voy a hacer esto
un poco más grande
esto es para que
entendáis
cómo funciona
el tema
de la request
entonces
cómo se hace
una petición
cómo viaja
y tal
lo que quieren
es que aquí
simules
qué es lo que hace
cuando
se está creando
una request
como una single page application
entonces
pues nada
lo podéis hacer
a ver
creo que era así
aquí el browser
pues que hacía
un post
y que el post
se le estaba pasando aquí
a barra
example app
barra
cómo era esta
create note
o algo así
esto lo voy a dejar a vosotros
para que
porque creo que es bastante divertido
y una vez que crea notes
pues entonces
deberíamos ver
qué es lo que nos está devolviendo
qué información nos devuelve
con qué cabecera
nos la devuelve
y cosas así
¿vale?
y así podéis crear un poco
de esta forma
pues vais viendo
y vais entendiendo mejor esto
¿vale?
luego crear
este sería
crear el diagrama
también de una sola página
y luego crear el diagrama
de a la hora de enviar la nota
si os parece interesante
los podéis crear
yo creo que puede ser un buen ejercicio
revisarlo
para que a ver
si habéis entendido bien
la diferencia
entre
la página
cuando no se está enviando
de forma asíncrona
¿vale?
o sea la app normal
y la de SPA
y ver las diferencias
y revisarlas
¿vale?
y de esta forma
lo tendréis más claro
y si hacéis un diagrama
pues seguro que lo entendéis
así que este
esta sería
el contenido
de la primera clase