Desarrollo web moderno: HTML, CSS, Javascript, Sass y Typescript

1. Introducción: Hola y bienvenidos a mi nueva clase, desarrollo web front-end moderno. Soy Christopher Dodd. Soy un maestro de primer nivel aquí en skillshare.com que allá por 2018, publicó su primera clase de Skillshare, Understanding Web Development, que se convirtió en una de las clases más vistas en categoría de desarrollo web de Skillshare. Si bien los fundamentos que compartí en la clase todavía se aplican, los lenguajes, herramientas y tecnologías de la web continúan evolucionando. HTML, CSS y JavaScript siguen siendo los lenguajes front-end esenciales, pero compiladores como Sass y TypeScript ahora han surgido y ganado popularidad, transformando la forma en que se escribe CSS y JavaScript. Los frameworks de JavaScript también han surgido para volverse súper populares entre frameworks y bibliotecas como React, Vue y Angular. Por cierto, si algunos de estos nombres no te son familiares, no te preocupes, lo cubriremos en la clase. En el interior, vamos a tomar una visión más moderna del desarrollo web front-end, sumergiéndonos en algunas de las herramientas más populares en uso hoy en día. Aprenderemos a escribir páginas web con HTML, estilizarlas con CSS y Sass, introducir la interactividad y la obtención de datos a través de JavaScript y TypeScript. Si te interesa obtener una visión general de cómo funciona realmente el desarrollo web front-end moderno, sigue viendo y te veré por dentro. 2. Desarrollo web de Frontend vs Backend: Probablemente el concepto más importante a entender en desarrollo web es la diferencia entre el front-end y el back-end. Cubrimos esto en Comprender el desarrollo web, pero es un concepto tan importante que quería lanzar aquí un repaso. En pocas palabras, el front-end es cualquier código que se junta en tu navegador web, decir, el programa que usas para navegar por la web. El código back-end es básicamente todo lo demás. Si retrocedemos un poco el reloj a cuando comenzó la web por primera vez, sitios web eran simplemente páginas de información. Este estilo de sitio web, solo una página estática de contenido principalmente de texto con quizás algunas imágenes, era la norma. Sin estilo elegante y mínima interactividad. Básicamente, la única interacción que tuvimos fueron los hipervínculos, que eran partes de los textos que estaban resaltados en azul con un subrayado sólido que al hacer clic nos dirigía a otra URL. ¿Cómo pasaría esto? De la misma manera se hace hoy con algo llamado lenguaje de marcado de hipertexto, mejor conocido como sus siglas HTML, que se sirve hasta el navegador para dotar estructura al contenido basado en texto e imágenes. Aquí es donde podemos empezar a ver la distinción entre el front-end y el back-end. Cuando llegamos a esa dirección del sitio web, le estamos diciendo a un servidor qué contenido servirnos, y ese contenido regresa del servidor en forma de HTML. Ese HTML es luego leído por el navegador y renderizado a nuestras pantallas como lo que vemos aquí. Usando cualquier navegador moderno, podemos abrir otro panel para ver el código crudo real, generalmente mucho contenido de texto dentro de estas cosas aquí que se conocen como etiquetas HTML. Hoy en día, el front-end suele ser mucho más complejo. Los sitios web son mucho más hábiles y tienen mucha interactividad. En algunos casos, estás ejecutando un programa informático completo en tu navegador, y eso es lo que se conoce como aplicaciones web. Ejemplos comunes de esto incluyen Facebook y Google Sheets. Si desactivamos JavaScript en nuestro navegador, puedes ver que estas aplicaciones dejan de seguir funcionando. Lo que le da estilo e interactividad a tu sitio web es CSS y JavaScript respectivamente. CSS significa hojas de estilo en cascada y está en capas sobre HTML para transformar completamente el aspecto del HTML estándar. JavaScript luego proporciona cualquier interactividad además de algunos conceptos básicos dentro de HTML. Básicamente, cualquier interactividad fuera de los hipervínculos y campos de formulario, como casillas de verificación, botones de opción y desplegable, requiere JavaScript para funcionar. Al igual que HTML, CSS y JavaScript se ejecutan en el navegador y, por lo tanto, forman parte del front-end. Para reiterar, el front-end es básicamente cualquier cosa que ocurra dentro de tu navegador. Ahora vamos a comparar eso con el back-end, que puede ser infinitamente más complejo. El back-end de un sitio web es lo se ejecuta en el servidor y cubre cualquier programación que ocurra detrás escena para entregar el HTML, CSS y JavaScript apropiados al navegador. El back-end es generalmente responsable de interactuar con bases de datos, determinar si el usuario está autorizado a acceder a cierta información, y luego servir esos datos entre el código front-end necesario de HTML, CSS y JavaScript al navegador. Para demostrarlo, interactuemos con una de las páginas más visitadas en Internet, google.com. Como puedes ver aquí, tengo google.com cargado en mi navegador web que es Google Chrome. Prefiero Google Chrome y es lo que voy a usar para esta clase. Lo recomiendo para desarrolladores, muy buen navegador web por las herramientas para desarrolladores que tiene. Pero, claro, si no te gusta Google, no te va a gustar Google Chrome, lo cual entiendo totalmente. Cualquiera que sea el navegador web que quieras usar para esta clase está bien, sin embargo, estaré usando Google Chrome a lo largo de esta clase. La razón por la que tengo esto cargado como de incógnito, aquí mismo se puede ver, es para que no me haya iniciado sesión automáticamente. Solo quiero demostrarte el estado desconectado y luego cuando empecemos a hablar de back-end, te mostraré la versión logged-in. Aquí mismo puedes ver que reconoce a través del almacenamiento de sesión o cookies que se almacenan en nuestro navegador que actualmente no estoy conectado así que puedo hacer clic aquí para “Iniciar sesión”, solo voy a hacer clic en “No, gracias” aquí. Empecemos a interactuar con nuestro código front-end aquí. Ahora bien, si recuerdas lo que acabo de decir, el servidor entrega HTML, CSS, JavaScript al navegador, y el navegador lo pone todo junto. Ese HTML, JavaScript y CSS es todo código front-end. Debido a que está armado en el navegador, realidad podemos ver todo el código sin procesar. Lo que voy a hacer es que voy a presionar Option Command I en una Mac para que aparezcan las herramientas del desarrollador. Esto de aquí mismo se llama DevTools, y si hago clic en esto, puedo ver todos los diferentes paneles dentro de estas herramientas de desarrollador. Esto de aquí mismo es la consola JavaScript, que veremos más adelante. Aquí mismo quiero dar click en “Elementos” y voy a cerrar esta parte de aquí abajo. Aquí arriba puedes ver todo el HTML y aquí abajo puedes ver todo el CSS al que le está dando estilo a esta página. Ahora bien, debido a que todo esto está sucediendo en nuestro navegador, realidad podemos modificar esto sobre la marcha. Lo que puedo hacer es que puedo hacer clic en esta cosa aquí mismo y luego puedo cursor sobre diferentes elementos la página para verlos en el código. Ahora bien, si hago clic en uno de ellos, vamos a dar click en este botón, puedes ver que este código de aquí mismo es en realidad lo que determina este botón aquí mismo. Como puedes ver la etiqueta HTML, aquí están pasando muchas cosas. Obviamente, este no es un ejemplo básico, esto es google.com. Pero lo que quiero que noten aquí es en este campo de valor tenemos la Búsqueda de Google, que se relaciona con el texto que viene a lo largo del botón. Lo que puedo hacer aquí es que realmente puedo editarlo así que en lugar de la Búsqueda de Google, puedo simplemente cambiar esto a Buscar, y puedes ver los cambios de botón. Aquí en el CSS, realidad puedo eliminar ciertos atributos. Si ves aquí, este estilo se está aplicando a ambos botones, si pongo el cursor sobre él, puedes ver que se aplica a ambos botones. Puedo deshacerme del radio fronterizo. Podría hacer algo como cambiar el color del texto a chocolate así y como pueden ver, el estado de flotación es un poco diferente. Pero cuando no se cierne, al menos, el color del texto va a ser chocolate. Esta imagen aquí mismo, hay dos formas de hacer esto, puedo hacer clic en esto y luego hacer clic en el elemento, o puedo hacer clic derecho sobre él y hacer clic “Inspeccionar”, que es mi forma preferida de hacerlo, probablemente me veas hacer eso más a menudo en la clase. Verás que esta etiqueta img aquí, que es una etiqueta de imagen en HTML, es lo que renderiza esta imagen aquí. Como puedes ver aquí, hay un src y si tuviera que hacer clic derecho aquí y “Abrir en nueva pestaña”, puedes ver aquí tenemos el archivo de imagen real de Google. Obviamente esto es google.com. Aquí tienen muchas otras cosas locas. Tienen todos estos códigos raros aquí que están dentro del atributo class aquí. Pero lo que estoy tratando de comunicarte aquí es que todo el código front-end, todo el HTML, el CSS y el JavaScript. El JavaScript es más difícil de interactuar con. Pero si me meto en la cabeza aquí, realmente puedo buscar aquí y luego puedo put.js, que representa un archivo JavaScript y entonces tal vez haya mucho código aquí. A lo mejor puedo encontrar un archivo JavaScript externo, que realmente no aparece. Pero aquí se puede ver dentro de estas etiquetas de script, que es lo que usamos para insertar algún código JavaScript, hay algo de código JavaScript aquí mismo, que en realidad podemos copiar o simplemente mirar para ver qué está pasando en la página. Pero el ejemplo de JavaScript es mucho más difícil con HTML y CSS. Es mucho más fácil determinar qué está pasando porque aquí tienes este panel, que muestra todos los estilos que se aplican a esta etiqueta de imagen y puedes marcar en la etiqueta de imagen real. Si hago clic por aquí para calcularlo, entonces puedes empezar a ver algunos de los estilos calculados y si hacemos clic aquí, podemos ver dónde ese conjunto, así que la fuente de Ariel está realmente establecida en todo el cuerpo del documento, que es básicamente todo el documento. Si hago click en esto, puedes ver que todas las fuentes cambian a default, que creo que es Times New Roman o algo así. O podemos cambiar el color de cuerpo predeterminado a otra cosa. Pero no va a anular lugares donde hemos sido específicos de elementos específicos. No va a anular estos colores ni a estos colores. Pero eso es sobre la especificidad de CSS en un concepto más avanzado. El punto que te estoy comunicando es que cuando fuimos a google.com, nos sirvieron el código front-end a nuestro navegador y nuestro navegador está armando esto aquí mismo. Toda la interactividad ahora que sucede después de se ha cargado la página está en el front-end. Es el HTML el que da estructura a la página y en realidad pone los elementos en la página. Es el CSS aquí mismo que determina el aspecto y la sensación, el diseño y es el JavaScript el que nos proporcionará cualquier funcionalidad. Veamos en realidad si podemos. Si hago clic en esto, hay un panel que se abre aquí. Es posible que sea solo CSS, pero muy probablemente eso viene a través de JavaScript. Si hago clic aquí, “Buscar por imagen ”, puedes ver un panel que se está abriendo aquí y luego puedo hacer clic aquí, “Subir un archivo”, desde mi sistema de archivos que la interactividad está ocurriendo en el front-end sin que recarguemos la página. Ahora una cosa que notarás es cuando actualice la página, esos cambios se habían ido. Lo cual es interesante, pero obviamente tiene sentido. Puedo volver aquí y cambiar esto para simplemente buscar de nuevo. Pero claro, Google no nos va a permitir cambiar su sitio web para todos. Cada vez que estés recibiendo código de un servidor a tu navegador, puedes modificarlo. Pero claro, esto no va a ser guardado el servidor de Google real y cambiado para todos. Esto solo sucede en tu versión que sacaste del servidor en el momento en que visitaste la dirección. Si vuelvo a refrescar aquí, va a sacar del servidor otra vez y ahora se puede ver que de repente entra en modo oscuro y también se determina que estoy grabando esto en Australia. Eso es algo de hechicería extra de Google ahí. Pero ahora lo que voy a hacer es abrir Google en una nueva ventana, una ventana de no incógnito. Aquí puedes ver que tenemos una experiencia similar, pero la diferencia es, puedes ver que actualmente estoy conectado. Puedes ver mi nombre, mi correo electrónico, que está oculto por privacidad. Es mi correo electrónico estándar. Puedes contactarme en mi correo electrónico de trabajo claro, pero no en mi personal, por favor respete eso. Pero aquí puedes ver mi nombre y mi foto aquí y ¿de dónde viene eso? Obviamente, eso viene de una base de datos y esos datos son específicamente para mí. Debido a que estoy conectado, decir, estoy autorizado para acceder a esos datos, ahora tengo mi foto de perfil, nombre y correo electrónico en esta página ahora. Eso viene del back-end y todas esas operaciones y cosas que puedo ver y meterse en el navegador. Cosas como autorización, acaparamiento de datos, averiguar qué datos servir, eso es todo cosas de back-end. Porque si se hiciera en la parte delantera para empezar, sería una gran pesadilla de privacidad. No quieres que pueda acceder a tu cuenta de Google o a la cuenta de Google de otra persona. La cuenta de Google de todos debe estar separada. Como puedes ver, esto viene desde el back-end y el back-end es donde ocurre el cambio permanente real para una aplicación como esta. El punto es que tenemos nuestro código front-end. Podemos entrar aquí. Podemos modificarlo tanto como queramos. Incluso podría cambiar mi foto de perfil aquí por alguna otra imagen. Como pueden ver aquí, en realidad puedo ir directamente a la imagen abierta en nueva pestaña. De hecho puedo ir directamente a la imagen. Podría simplemente reemplazar esta URL aquí mismo en el HTML con alguna otra imagen, y eso actualizaría la imagen. Puedo cambiar mi nombre. A ver. Si entro aquí. Esto me va a mostrar todas mis cuentas. Si arrastro esto para que veas que está bastante anidado en. Incluso podría cambiar mi nombre Michael Jackson, por ejemplo. Entonces si hago clic por aquí, ahora soy Michael Jackson. Puedo modificar todo este código front-end, pero claro que no va a modificar el back-end. El back-end es lo que nos sirve el HTML, CSS y JavaScript. Cada vez que hacemos una solicitud al servidor, refrescando por aquí, y hago clic aquí, vuelvo a ser Christopher Dodd porque está recuperando esos datos del usuario conectado del back-end de Google y luego los pone con el HTML, el CSS, JavaScript, para crear la experiencia front-end, que luego se junta en tu navegador. Ojalá, a través de este ejemplo se pueda ver esto funcionando en el mundo real, la distinción entre front-end y back end. Me gusta usar este ejemplo porque creo que realmente demuestra la distinción entre ambos. Como podemos ver aquí, aquí no hay ninguno del código de back-end. No puedo acceder directamente a la base de datos. Por supuesto, eso sería una enorme pesadilla de seguridad. El back-end es todo eso, todos los detalles de mi cuenta, operaciones más complejas. Lo único que viene a través del front-end es la estructura de la página, el estilo de la página, y cualquier interactividad que deba suceder sin recargar la página. Puedes ver aquí puedo abrir este panel y algunos de los estilos aquí están modificados JavaScript en realidad está haciendo eso por nosotros porque en realidad no estamos recargando la página. Estamos recibiendo algo de interactividad front-end. Puedo abrir esto y obtener mis aplicaciones. Voy a dejarla ahí, chicos. En el siguiente video, en realidad vamos a escribir algo de HTML y luego vamos a construir sobre eso con CSS, JavaScript y luego algunas de las herramientas de preprocesador que se sientan encima de esos lenguajes. Te veré en el siguiente video. 3. HTML: Como aprendimos en el último video, HTML es el lenguaje de marcado estándar para la web. Lenguaje de marcado según la enciclopedia Británica, significa sistema estándar de codificación de texto, que consiste en un conjunto de símbolos insertados en un documento de texto para controlar su estructura, formato o la relación entre sus partes. Los símbolos de marcado pueden ser interpretados por un dispositivo, computadora, impresora, navegador, etc., para controlar cómo debe verse un documento cuando se imprime o se muestra en un monitor. Por lo tanto, un documento marcado contiene dos tipos de texto. Texto a mostrar y el lenguaje de marcado sobre cómo mostrarlo. Creo que esta es una descripción bastante buena. En HTML, al igual que otros lenguajes de marcado, tenemos etiquetas y luego tenemos el contenido de la etiqueta entre ellas. Esta etiqueta aquí con el signo menos que y el signo más que representa una etiqueta HTML estándar. En la mayoría de los casos, sin embargo, habrá algunos textos que vienen después de ella. Entonces esto, la etiqueta HTML estándar con una barra diagonal después del signo menor que, indica que este es el final del contenido para este elemento HTML en particular. También podemos anidar elementos dentro otros elementos y lo verás todo el tiempo dentro de HTML. Es un sistema donde los elementos están diseñados para ser colocados en otros elementos para crear una estructura similar a un árbol acertadamente llamada árbol de documentos. Podemos ver cualquier estructura HTML como un árbol usando una herramienta como esta Live DOM Viewer. Pero en lugar de profundizar en cualquier teoría aquí, escribamos realmente algo de HTML y veamos que funciona en acción. El editor de código que voy a usar para la clase de hoy se llama Visual Studio Code. Es súper popular porque tiene básicamente toda la funcionalidad de un editor de código de pago que viene completamente gratis de Microsoft. Mucha gente lo está usando, incluyéndome a mí mismo. No veo ninguna razón para ir con un editor de código diferente. Pero claro si por alguna razón quieres hacer esta clase en un editor de código diferente, puedes hacerlo. Algunas de las instrucciones serán un poco diferentes, pero en su mayor parte puedes usar cualquier editor de código que quieras seguir. Si aún no tenemos Visual Studio Code instalado, solo bújelo en Google. Visual Studio Code, como puedes ver, es desarrollado por Microsoft, fecha de lanzamiento inicial 2015. Ha existido por un tiempo, pero ha sido en los últimos, diría 3-5 años que se ha vuelto muy popular. Aquí puedes ver que detectó que estoy usando una Mac, así que simplemente puedo hacer clic aquí para descargar versión que sea apropiada para mi sistema operativo. Lo que voy a hacer es, voy a volver a cambiar a Visual Studio Code. En realidad voy a cambiar a la ventana de mi buscador aquí y voy a crear un nuevo proyecto para la clase de hoy. Yo sólo lo voy a llamar Desarrollo Web Moderno. Entonces a partir de aquí lo que puedo hacer es, como dice aquí, abrir un archivo o carpeta usando este atajo. Así que solo voy a usar el atajo y luego navegar a esa carpeta de código y abrir esa carpeta. Ahora tenemos nuestro proyecto vacío. Voy a actualizar el código de Visual Studio más tarde. Y aquí puedo o bien hacer clic en esto o puedo hacer clic derecho en “Nuevo Archivo” y voy a crear un index.html. Hay una razón por la que lo llamé index.html. Índice generalmente significa que esta es la página de inicio o archivo raíz de una dirección y luego el extension.html es para indicar qué archivo es. Por qué esto es importante es porque cuando ejecutamos un servidor, va a buscar el archivo de índice cuando estamos en la ruta raíz o URL raíz. Déjenme demostrarlo muy rápido. Déjame solo escribir un poco de HTML solo para que comencemos y luego volveremos a él. Simplemente haremos hola mundo entre algunas etiquetas h1. Voy a golpear “Guardar” en eso. La forma recomendada en la que lo cargaría en tu navegador para empezar es, si solo vamos a Google Chrome y luego abro Finder, literalmente podemos simplemente arrastrar este archivo HTML a Google Chrome y lo cargará. Ahí vamos, tenemos nuestro rubro diciendo hola mundo. En este caso no importa cómo llamemos nuestro archivo. Podría cambiarle el nombre a page.html. Si hago clic en esto, va a error porque la ruta ha cambiado, pero si la cambio aquí arriba a page.html, va a estar bien. Pero si tuviéramos que hacer algo como ejecutar un servidor, que aquí abajo tenemos este botón para hacer clic para ejecutar un servidor en vivo. Se trata de una extensión. Si vamos aquí a extensiones, puedes ver las extensiones que tengo instaladas. Se llama Live Server de Ritquick Dey. Si quieres instalar eso, probablemente lo usaremos más adelante en la clase. Si lo hicimos y hicimos clic en “Go Live”, entonces todavía obtenemos page.html. Pero si fuimos a la raíz, esta dirección, verás que no se carga. Si queremos que la página se cargue en la raíz de nuestra dirección, necesitamos asegurarnos de que se llame índice. Si presiono “Guardar” en eso, refrescar por aquí, puedes ver que no hay ninguna especificación de cómo se llama la página porque, con index.html, se va a cargar en la raíz de la dirección. Porque aquí estamos ejecutando un servidor, tenemos una dirección IP y un puerto. No quiero meterme demasiado en estas cosas de aquí mismo. No quiero empantanarte en teoría. De hecho, vamos a saltar a un poco de HTML. Voy a deshacerme de ese servidor. Volvamos a lo que teníamos antes, que lo estaba ejecutando desde el sistema de archivos. Como puedes ver aquí, dice aquí, estás viendo un archivo local o compartido y aquí tenemos nuestro documento HTML. Lo que voy a hacer es, voy a cerrar esto. Intentemos poner ambos en la misma pantalla, como tal. Entonces vamos a deshacernos de esto, guardar, refrescarnos por aquí y ya verán que ya no tenemos nada. Empecemos con algo de HTML. Voy a cerrar el Explorer aquí, aumentar el tamaño aquí, así es más fácil de ver. De hecho, podemos obtener algo de contenido repetitivo HTML simplemente escribiendo HTML en Visual Studio Code y luego puedo obtener este código repetitivo, lo que se llama código repetitivo. Si me alejo, se puede ver. No hagamos eso para empezar porque estamos aprendiendo HTML en este momento. Lo que vamos a necesitar son dos cosas. Vamos a necesitar una etiqueta en la cabeza y una etiqueta corporal. Ambas etiquetas, vamos a necesitar una etiqueta de cierre porque vamos a anidar cosas dentro de ellas. Vamos a abrir una etiqueta en la cabeza. Puedes ver Visual Studio Code nos ayuda con práctico autocompletado y dándonos la referencia de MDM. Aquí vamos. Si presiono esto, en realidad crea automáticamente la etiqueta de cierre para mí, que como discutimos anteriormente, es exactamente la misma, pero tiene esta barra antes de la palabra. Entraré dentro de eso y presionaré “Enter” y eso se abrirá muy bien formateado con sangría aquí. Eso es solo formatear, para que el código sea más fácil de leer. Entonces bajaré y crearé el cuerpo y me sale lo mismo. Si presiono “Enter” nos va a proporcionar alguna sangría agradable para nosotros aquí. Si queremos que algo se muestre en la página, tenemos que ponerlo en nuestras etiquetas corporales. Si vuelvo a poner lo que teníamos antes. Hagámoslo sin el h1. Yo solo voy a decir hola mundo, solo algo de contenido de texto básico, refrescar por aquí, ya verás que sale. De lo que se encarga el encabezado es, todo lo que es más meta al documento. Estamos hablando del título del documento, referencias a archivos CSS que podríamos traer, información SEO, cosas así. Cosas que no aparecen en la página, pero que siguen siendo importantes para el archivo HTML. El ejemplo más común aquí es el título. Puedo crear esta etiqueta de título y entre la etiqueta de título de apertura y cierre, pongamos un título. Puedes llamar a esto como quieras, mi primera página web. Si presiono “Guardar” en eso, quiero que se den cuenta, vea en la pestaña aquí es solo el nombre del archivo. Bueno, ahora si nos refrescamos, verás que va a aparecer como mi primera página web. Entonces esto es para el usuario, pero también para los buscadores de Google. Cualquier cosa que sea insertar o incrustar la página en otro sitio web. Al igual que si tuvieras que compartir esta página en Facebook por ejemplo, ahora estás diciendo el documento y diciéndole a la web cuál es el nombre de la página. Por ahora, eso es todo lo que voy a hacer por la etiqueta de cabeza. Bajemos al cuerpo aquí. Como viste antes, creé un H1. Un H1 es un encabezado de sección, así que vamos a ejecutar eso y luego voy a hacer clic en “Refrescar” por aquí, y como pueden ver, sacamos algo de estilo de la caja. Lo que es un H1, es un encabezado de nivel superior, así que va hasta el H6, creo. Sí, aquí se puede ver todo el camino hasta H6. Si no lo hemos establecido en nuestro CSS, vamos a obtener algún estilo predeterminado con el H1 siendo el más grande, y luego si tuviéramos que tener un H6 y set, llamemos a esto un encabezado de sexto nivel. Refresca por aquí. Puedes ver que probablemente sea incluso más pequeño que si tuviéramos que escribir texto normal. Sí, es incluso más pequeño que los textos normales, lo cual es un poco raro, pero entiendes el punto. Hay todo el camino desde H2, rumbo de segundo nivel, como puedes ver, y listo para usar, viene con un estilo básico. Pero es importante tener en cuenta aquí que quieres usar los encabezados correctos, incluso fuera del estilo porque eso es solo una señal de un buen formato para Google. Google realmente escaneará una página web y determinará si está estructurada correctamente, por lo que siempre querrás usar estas etiquetas de encabezado correctamente. si estás escribiendo un documento, tienes tu encabezado principal y si quisieras crear un encabezado debajo de eso, sería el Título 2, y si quisieras crear un encabezado debajo de eso, sería el Título 3. Sigue usando el encabezado correcto, incluso si estás trabajando con diferentes estilos. H1-H6 es una etiqueta muy común. Voy a deshacerme de este H6 de aquí mismo. En lugar de texto regular, te voy a mostrar otra etiqueta popular llamada etiqueta de párrafo. En Visual Studio Code, solo puedo escribir Lorem, presionar “Tab” e insertará Lorem ipsum. Si presiono “Guardar” en eso, refrescar por aquí, verás que obtenemos este párrafo. Ahora bien, lo que es importante entender en HTML es que, a menos que lo cambiemos, estamos sacando el estilo de la caja con HTML. Déjame abrir esto y luego te puedo mostrar en las DevTools. Si pulso “Option Command I” en una Mac. Ahora podemos ver el código de salida por aquí. Es exactamente lo mismo de lo que tenemos aquí, pero ahora podemos verlo venir a través del navegador y de hecho podemos interactuar con él. De hecho, podemos entrar y cambiar palabras como hicimos en el ejemplo de Google y podemos cerrar y expandir etiquetas como esta. Pero también podemos ver los estilos calculados. Si vamos y colocamos el cursor sobre esta etiqueta P aquí mismo, puedes ver naranja apareciendo arriba y debajo del párrafo. No puedo pasar el cursor sobre al mismo tiempo que mostrarlo. Pero puedes ver a la izquierda ahí tienes P, te dice las dimensiones de la misma, y luego te muestra algún espacio naranja arriba y abajo que en realidad es relleno y podemos verificar eso entrando en Computed aquí y mirando esto, lo que se llama el modelo de caja. Puedes ver aquí vamos, t en realidad no es relleno, me quedo corregido, es margen. Los márgenes son un poco diferentes. No entraremos en el modelo de caja en esta clase en particular, pero sí lo cubro en mi clase HTML y CSS aquí en Skillshare, para que puedas comprobarlo. Pero como puedes ver aquí, tenemos algún margen por defecto. Si entramos en el segundo encabezado, podemos ver que también tenemos algún margen por defecto. Pero también tenemos algunos otros valores predeterminados aquí como el tamaño de fuente es 50 por ciento más grande y el estilo de visualización es bloque. Luego entraremos en estilos. Pero solo quiero indicar aquí que cuando escribimos HTML sin ningún CSS, estamos obteniendo algunos CSS de forma gratuita. Estamos obteniendo algo de CSS por defecto. Aquí arriba en nuestro H1, puedes ver que tenemos un tamaño de fuente que es 2em, que es una unidad. Obviamente, eso es un medio em extra en el H2. Pero todo esto es completamente editable con CSS, es solo valores predeterminados dentro de HTML. Aquí puedes entrar en estilos y ver la hoja de estilos del agente de usuario, que es como la hoja de estilos estándar. Esto podría cambiar dependiendo del navegador que estés viendo. Pero entonces también puedes entrar en Computed aquí, y este botón aquí te mostrará de dónde viene eso. Creo que el font-weight también es audaz y eso es una diferencia. Pero solo para adelantarnos un poco aquí, podemos cambiar esto a un menor peso de fuente. Sigue siendo un H1, pero simplemente no tiene ese estilo predeterminado H1. Entonces eso es importante saberlo. Vamos a cubrir algunas de las otras etiquetas comunes que vas a ver en HTML. Como mencioné en los videos anteriores, uno común es la etiqueta A, que es el hipervínculo. Es solo una A. Aquí tenemos nuestra etiqueta de cierre. Queremos poner eso del otro lado del texto queremos un hipervínculo. Si presiono “Guardar”, refrescar por aquí, normalmente deberíamos obtener algún estilo predeterminado. Pero creo que porque todavía no tenemos un href, así que tenemos que ponerlo realmente, y este va a ser nuestro primer atributo. Podemos agregar atributos a la etiqueta de apertura, no a la etiqueta de cierre, la etiqueta de apertura y como puedes ver aquí, href contiene la URL o el fragmento al que apunta el hipervínculo. Eso es lo que estamos buscando. Si abro eso, no importa lo que ponga aquí. Solo pongamos un hash que es el marcador de posición habitual, y luego presiono “Guardar”, refrescar por aquí, ya me verás obtener el estilo predeterminado para un hipervínculo. Obtenemos nuestro cursor cambiando. Obtenemos los textos que vienen a través azules y el subrayado. Esto es muy de la vieja escuela. Por lo general, este estilo es sobrescrito por muchos sitios web, pero ese es el estilo clásico de un hipervínculo. Acabo de abrir las DevTools otra vez aquí y solo voy a ponerla aquí abajo. Creo que podemos mirar a los tres al mismo tiempo. Como puedes ver aquí, como mencioné, el color es enlace webkit, que es una variable, y nuestro cursor será puntero y vamos a darle ese subrayado. Puedes ver aquí, o si entramos en Computed, generalmente ese es el color calculado real ahí mismo y el estilo del puntero para el cursor. De nuevo, podemos entrar aquí, lo que vamos a hacer más adelante, y cambiar esto a otra cosa. Cursor, podemos hacer un punto de mira por ejemplo. Cuando tengas un enlace, puedes cambiar a este cursor de punto de mira aquí. Podemos establecer eso a lo que queramos con CSS. El punto es que tenemos algunos estilos predeterminados fuera de la caja. Ahora antes de crear este archivo llamado page.html, en realidad volvamos y pongamos ese en page.html y vamos a ponernos muy perezosos con él aquí. Vamos a poner de nuevo Hello World sin ninguna etiqueta HTML. Pero solo quiero mostrarles aquí en realidad podemos enlazar a esa página aquí y luego si me refresco por aquí, haga clic en esto, entonces verá que está un poco apretado. Pero se puede ver por aquí que eso nos dirigirá a page.html. Si extiendo esto todo el camino, volvamos a aquí y entonces tal vez aquí metemos un enlace y lo enviemos de vuelta a index.html. Vete a casa. Ahora si me refresco por aquí y hago clic en “Ir a Inicio”, nos llevará de vuelta a index.html. Ahora podemos enlazar entre dos archivos. Voy a quitar page.html, eso fue sólo para indicar hipervínculos. Simplemente borraremos eso. Mueve eso a la basura. Todo esto es algo muy básico, chicos, si están demasiado avanzados para esto, no dudes en saltarte adelante. Pero ahora mismo vamos a cubrir algunas etiquetas HTML más. Como mencioné previo a este video, lo que podemos hacer es que también podemos agregar en una imagen y vimos que en el ejemplo de Google, solo era una etiqueta IMG y esta es una etiqueta de cierre automático. En realidad no tenemos que tener una etiqueta de cierre para esto, porque todo lo que necesitamos hacer como mínimo, es darle la dirección de la imagen que queremos mostrar, y lo hacemos a través del atributo SRC y luego entre estas comillas dobles, ponemos en el enlace a una imagen. Esto es solo una imagen de marcador de posición y luego solo la cerraré teniendo el signo de menos que. Este es el signo mayor que, así que solo pones eso al final y tienes una etiqueta HTML bien formada. Aquí vamos, refrescar por aquí y aquí puedes ver que hay un poco de tiempo de carga para que la imagen se cargue desde esa fuente externa, ahora está en caché por lo que no volverá a hacer esa carga. Pero ahora puedes ver que tenemos nuestra imagen de marcador de posición aquí. Si inspeccionamos eso, verás que tenemos, no, no hemos conseguido ningún margen con él. Vamos a cerrar este de aquí. Permítanme estructurar este documento de manera un poco diferente. Tenemos, vamos a poner aquí un párrafo de Lorem Ipsum. Vamos a poner eso ahí. Permítanme ampliar esto. Pondremos la imagen aquí bajo el rubro de segundo nivel. Yo sólo voy a llamar a este texto con imagen. Pulsa “Guardar” en eso, refrescar por aquí. Ya puedes ver que tenemos esta sección aquí abajo. Voy a tirar aquí una etiqueta extra de hr, que es regla horizontal creo que significa, y solo va a crear una línea entre los bits de contenido. Guarda, actualiza por aquí, verás que crea esta línea. Entonces lo que voy a hacer es poner aquí otro párrafo de texto, entonces voy a tirar algo solo para demostrar una cita de bloque. Esto es solo principalmente una etiqueta semántica, pero poniendo en una cita. Lo que quiero decir con semántica es que no le hay mucho estilo, así que es principalmente solo el naming. Puedo decir aquí una cita : “Hombre sin carro no vayas muy lejos”. Una de mis citas favoritas. Como puedes ver aquí, se ve exactamente igual, pero solo con alguna sangría. Si tuviera que volver a abrir mis herramientas de desarrollo, desplácese hacia abajo, haga clic con el botón derecho sobre aquí, puede ver que acabamos un atributo aquí llamado margin-block-start, que le da este margen a la izquierda de 40 píxeles. Entonces tienes estos 16 pixeles en la parte superior. En realidad, también tienes 40 píxeles a la derecha, así que eso es lo que le está dando esta funcionalidad sangrada aquí o mirada sangrada, y luego simplemente pondremos otro párrafo al final de eso, refrescar por aquí y ya puedes ver. Vamos a crear una nueva sección aquí. Crea otro h2 aquí. Llamemos a este párrafo y lista. Ahora, te voy a mostrar una estructura HTML común aquí. Podemos abrir ya sea lista ordenada o lista desordenada. La lista desordenada suele ser más común, así que voy a ir ul, que significa lista desordenada, abrirla y luego creamos una etiqueta LI anidada para todos los elementos de la lista dentro de la lista. Primer ítem, lo veremos en nuestra pantalla en solo un segundo, segundo y tercer ítem. Si le pego a “Guardar” aquí, en realidad nos olvidamos de ponerlo en un párrafo aquí. Nuevamente, sólo un poco más de Lorem ipsum. Presiona “Guardar” en eso, actualiza por aquí, y como puedes ver, tenemos nuestra lista aquí. Si tuviera que volver a inspeccionar, lo cual no voy a hacer esta vez porque creo que entiendes el punto, va a haber algún estilo aplicado a esto que le dé este punto y la sangría. Automáticamente, también hay algo de estilo en el UL. Si quisiéramos crear una lista ordenada que es solo para tenerla numerada, podemos reemplazar la u por una o. Refrescar por aquí, y puedes ver si íbamos a agregar un cuarto ítem, automáticamente aparece como cuatro. Guarde eso, voy a mover esto aquí ahora, refrescaré por aquí, y el cuarto artículo automáticamente tiene un cuatro al frente. Por último, te voy a mostrar algunos campos de formulario, que es la mayor funcionalidad lista para usar que puedes obtener con HTML. Vamos a crear, sólo voy a llamar a este párrafo con forma, y después voy a poner en algún Lorem ipsum aquí. Pero luego después del párrafo de Lorem ipsum, voy a poner en una forma. Ahora como funcionan los formularios es que podemos enviar los detalles que establecemos aquí a una dirección específica, y lo hacemos a través del atributo action. Aquí si inserto entradas entre aquí, y envío ese formulario, enviará los datos a una URL en particular. Así es como usualmente usas los formularios. Pero por ahora, sólo voy a mostrarles los insumos reales ellos mismos. El primero que te mostraré es texto. Se trata de etiquetas de cierre automático. No necesitamos ponerle un cierre a esto. Voy a poner tipo de entrada de texto y eso es suficiente para que funcione, básicamente. Si me refresco por aquí, pueden ver que tenemos esta caja aquí cual ahora tenemos cierta interactividad. Puedo poner lo que quiera aquí, hola mundo. Tengo esta caja de texto editable. También puedo poner un valor aquí, así que cuando se carga, ya tiene algún texto en él. Ahí vas. Pero claro que es un insumo para que pueda cambiarlo. También podría, deshacerme de este valor aquí, cambiar esto a un campo numérico, que básicamente va a tener el mismo aspecto si refresco por aquí. Pero ahora se pueden ver estas flechas arriba y abajo. Actualmente estoy escribiendo caracteres aquí, no está funcionando. Tengo que escribir un número. Sólo aceptará un número, y luego podré subir y bajar. Ese es un campo numérico. número 1 que podemos hacer es la casilla de verificación refrescar por aquí, y pueden ver que puedo hacer clic en él para encenderlo y apagarlo. Obviamente, eso realmente no tiene mucho sentido. Por lo general, lo que hacemos es usar una etiqueta. Puedo crear una etiqueta, poner la casilla de verificación dentro de la etiqueta, y luego escribir algo de texto aquí. Digamos que es como una forma en la que estás aceptando algo. Yo sólo voy a poner estoy de acuerdo. Entonces si hago clic en la etiqueta, también marcará la casilla de verificación. Pasemos a la creación de botones de opción. Ahora bien, los botones de radio son un poco más complejos porque tenemos darles un nombre a todos para que sepamos que están relacionados. Voy a llamar a esto Radio 1 y vamos solo, qué debemos decir aquí Opción 1, solo lo llamaré Opción 1. Vamos a necesitar múltiplos de estos. Voy a copiar y pegar. De hecho, alejemos un poco, para que podamos ver todo aquí. Opción 2. Queremos mantener esto como Radio 1, por lo que estos están vinculados. Voy a golpear “Guardar”, refrescar por aquí. Ahora, con radios la diferencia entre esta y las casillas de verificación es que si selecciono una y después selecciono otra, elimina la selección de la primera. Lo hace porque estos están en el mismo grupo. Si tuviera que crear o duplicar estos, y los llamamos a estos dos Radio 2 en el campo de nombre, entonces estos estarían vinculados entre sí. Si voy en este primer grupo y selecciono aquí, va a eliminar la selección de la otra radio del grupo. Si voy por aquí, este es un grupo separado, así que no va a quitar del primero, menos que claro, me olvidé de a menos que claro, me olvidé de cambiar esto, y ahora tenemos el mismo grupo. Pero entonces tendríamos que escribir esta Opción 4. Cosas muy básicas, pero solo dándote una visión general de algunos componentes comunes en HTML. También tenemos área de texto, que es bastante básica. En realidad es una etiqueta donde tiene una etiqueta de cierre, y el contenido de marcador de posición que podemos poner en el área de texto es lo que ponemos entre las dos etiquetas. Pongamos un poco de Lorem ipsum en un área de texto. Como puedes ver aquí, en realidad podemos ampliar esta caja, lo cual es interesante. Vamos a tener que hacer un poco más formato sobre esto generalmente, pero aquí puedes ver que tenemos algo de Lorem ipsum en un campo de texto de varias líneas básicamente. Eso también es reconsiderable. Podemos comenzar con cierto contenido, comenzar con el Lorem ipsum, y luego modificarlo. Esa es el área de texto. Entonces finalmente el que te voy a mostrar es seleccionar, que es como creamos un desplegable. Tenemos nuestro selecto y dentro queríamos opciones de nido. De nuevo, voy a ir a la Opción 1, pegar en un duplicado, Opción 2, y la Opción 3 aquí mismo. El seleccionado actualmente va a ser el primero por defecto. Si actualizo por aquí, puedes ver que tenemos un desplegable con la primera opción seleccionada automáticamente. Está saliendo de la pantalla. Déjame quitarle algo de esto. Vamos a hacer hasta aquí. Guardar, refrescar por aquí. Si hago clic aquí, puede ver que podemos seleccionar diferentes opciones en este desplegable. Si queremos seleccionar una opción diferente a la primera, podemos poner aquí un atributo opcional, recién seleccionado, eso es todo. Refresca y puedes ver Opción 2 ya está seleccionada por defecto, pero podemos cambiarla aquí. Esto es lo que quiero decir con interactividad sin JavaScript, esto viene estándar en HTML, y esta es una versión muy Web 1.0 de desarrollo web. Déjame explicarte un poco más esa afirmación. Web 1.0 es básicamente la primera versión de la web, que era muy parecida a esta. Era solo un diseño vertical con solo encabezados, párrafos y formularios y listas, todas esas cosas que hicimos en este video. Fue muy básico. No había mucho estilo. el paso del tiempo, y ahora está este término, Web 2.0, que habla de la web actual fuera de todas las cosas de blockchain que están pasando, que ahora tiene esta etiqueta de Web 3.0. Web 2.0, que es en lo que estamos ahora, es más diseños bidimensionales con mucha más interactividad proporcionada por JavaScript. En la Web 1.0, solo eran los sitios web los que mostraban información. Todo lo que necesitabas era este contenido semántico como un encabezado de nivel superior, un párrafo y luego un formulario para aceptar algunos datos. Cosas muy básicas que también venían con un estilo fuera de la caja que vimos antes cuando inspeccionamos estos, todo el estilo que viene de serie. Esto es mucho desarrollo web en etapa temprana. Realmente no ves, como sabes, muchos sitios web que ahora se ven así, pero este es el aspecto estándar del HTML sin ningún estilo. En el siguiente video, vamos a darle estilo a nuestra página web, hablemos de CSS. Obviamente CSS es un tema enorme, pero solo haremos una breve descripción general y así puedas entender cómo podemos realmente diseñar lo que hemos creado en este video, y construir sobre lo que hemos aprendido sobre HTML. Te veré en el siguiente video. 4. Descargo de responsabilidad rápida: Hola a todos. Solo quería lanzar un video extra aquí como un pequeño descargo de responsabilidad porque acabamos de cubrir HTML, que es bastante básico y hemos cubierto mucho de lo que puedes hacer con HTML. No hay mucho, solo hay anidamiento de etiquetas dentro de otras etiquetas, no es demasiado complicado. Pero a medida que empecemos a meternos en CSS, JavaScript, y los demás conceptos, va a llegar a ser mucho más complejo muy rápido. Y muchos de estos temas podrían ser un curso en y por sí mismos. De hecho, algunas de ellas lo son, y voy a hacer referencia a esas otras clases medida que voy a lo largo del resto de la clase. Pero solo quería hacer este descargo de responsabilidad aquí porque he estado haciendo clases de Skillshare tiempo suficiente como para conocer algunas de las críticas que podría recibir en las críticas. Yo solo quería asegurarme de que esta es una clase para todos los niveles. Al principio, nos adentramos en lo básico, nos metemos en HTML, hablamos de algunos CSS básicos, pero es posible que empieces a ver que la complejidad medida que comenzamos a entrar en Sass, Tailwind, JavaScript, especialmente TypeScript, y luego pasar a los frameworks de JavaScript, incluyendo la incorporación de información de las API. Solo en orden de cómo aparecen, aquí hay solo algunos detalles adicionales hablando ampliamente sobre los temas de los que vamos a hablar para el resto de la clase. CSS, vamos a hablar de layouts porque siento que los layouts son lo más complejo en CSS. Si quieres que el color de un texto en particular sea rojo, entonces puedes establecer color-rojo. Eso no es demasiado complicado de entender, ojalá, pero los diseños son un concepto completamente nuevo. Vamos a hablar de Flexbox, vamos a hablar de cuadrícula CSS. Pero solo debes saber que hay tantos estilos diferentes dentro de CSS. Si quieres profundizar en eso, hay una clase aquí en Skillshare que he creado llamada Fundamentos de desarrollo web, HTML y CSS. Después de la lección CSS, vamos a hablar de Sass, y luego también vamos a entrar en algo llamado Tailwind CSS más adelante en la clase. Como he escrito aquí, es posible que deba desarrollar algo de experiencia con CSS para comprender el beneficio de estas herramientas adicionales. Como voy a decir a lo largo de esta clase, HTML y CSS y JavaScript son los únicos lenguajes front-end que se ejecutan en el navegador, y son los únicos imprescindibles para aprender. Pero claro, tenemos todas estas otras herramientas como Sass, como Tailwind CSS, TypeScript, Vue. Esos son de los que vamos a hablar en esta clase. Simplemente se sientan en la cima para ayudar a los desarrolladores. Para entender el beneficio de ellos, es posible que necesites algo de experiencia con lo subyacente que están tratando de producir. En cuanto al estilo, sería CSS, en términos de funcionalidad, sería JavaScript. Pasando a JavaScript, solo vamos a estar rascando la superficie en esta clase y luego vamos a estar sumergiéndonos en TypeScript y Vue. Se mueve muy rápido una vez que llegamos a la parte JavaScript. Si quieres hacer una pausa una vez que lleguemos a la lección de JavaScript y profundizemos en JavaScript, tengo una clase completa sobre JavaScript, se llama Fundamentos de Desarrollo Web JavaScript. Puedes checar esa. Nuevamente, para entender el beneficio de TypeScript, que también tengo aquí abajo, necesitarás algo de experiencia con proyectos front-end más complejos. De hecho, es difícil encontrar un ejemplo muy básico para usar TypeScript, porque el beneficio de TypeScript solo se hace evidente cuando comienzas a trabajar con proyectos front-end más complejos. Entonces finalmente, vamos a estar viendo Vue.js. Vue.js es solo un ejemplo de un framework front-end reactivo. Deberías sentirte cómodo con DOM Navigation y Event Listeners antes de sumergirte en cualquier framework front-end como Vue, React, Angular, etc. Si quieres saber más sobre esos conceptos, específicamente, sumérgete en Fundamentos de Desarrollo Web JavaScript, mi clase aquí en Skillshare. Solo un recordatorio aquí, los únicos elementos esenciales del front-end son HTML, CSS y JavaScript. Todas las demás herramientas sólo están ahí para ayudar con el desarrollo de estas tres. Además, cualquier otra herramienta, discutida o no discutida en esta clase, puede entrar y salir de popularidad. El paisaje cambia constantemente y puedes utilizar estas herramientas a tu propio criterio. Los únicos elementos esenciales tal como está escrito aquí son HTML, CSS y JavaScript. Así que solo quería lanzar este video de descargo de responsabilidad solo para abordar cualquiera de las posibles preocupaciones que puedo ver surgiendo con lo rápido que nos movemos por el resto del curso. Si alguna vez estás atrapado en un determinado escenario y quieres aprender más al respecto, puedes ir a otra clase en mi canal Skillshare aquí y encontrar una inmersión profunda en muchos de estos temas. De lo contrario, puedes mirar otros tutoriales o simplemente saltarte esa lección por completo. Si no es la lección de HTML, CSS y JavaScript, entonces puedes sentirte libre de saltarte eso por completo. El propósito de esta clase es darte una visión general de algunas de las herramientas populares en uso hoy en día, para que puedas elegir tu propia empresa después de eso, como la clase original, entendiendo el desarrollo web. Entonces solo quería dejar eso claro antes de seguir adelante. Sin más preámbulos, entremos al resto de la clase. 5. CSS: En este video, vamos a introducir CSS. CSS podría ser un curso en sí mismo, razón por la cual tengo un curso dedicado de Skillshare sobre HTML y CSS. Para este video, solo vamos a cubrir lo básico y cómo se aplica al HTML pasando a partir de este ejemplo que compartimos en el último video. Ahora te mostré dos formas de cargar nuestro HTML. Podemos hacerlo a través del sistema de archivos como Search o a través de un servidor. Voy a cambiar a entregarlo a través de un servidor en este video. Uno de los grandes beneficios de hacer esto es en lugar de tener que refrescar cada vez así que si creo un cambio aquí, tengo que presionar Guardar en este documento, luego actualizar en este documento. Para ver el cambio, podemos eliminar fácilmente ese paso ejecutando nuestro Live Server, que como te mostré en el último video, si abro mis extensiones aquí, Live Server by Ritwick Dey. Si quieres instalar esto, todo lo que tendrías que hacer en tu versión de Visual Studio Code es simplemente escribir Live Server en aquí, búscalo, aparecerá, haces clic en él y luego haces clic en Instalar. Extensiones súper fáciles de instalar en Visual Studio Code. Voy a cerrar esa pestaña y luego voy a hacer clic aquí para entrar en vivo. Lo va a abrir. Aquí puedes ver que tiene index.html al final. Ni siquiera necesitamos eso, podemos eliminarlo y sabrá cuál es la página web porque index representa la dirección raíz en un sitio web. Vamos a demostrarlo ahora. Si entramos aquí, y voy a llamar a esta segunda opción en lugar de a la opción 2, y le doy a Guardar. Puedes ver que no necesitamos refrescarnos por aquí porque tiene una recarga en caliente, realmente genial y útil para el desarrollo. Ahora vamos a traer un archivo CSS. De hecho, podemos crear algo llamado Etiqueta de Estilo aquí y poner CSS aquí y se aplicará a la página en la que está. Pero hagámoslo de la manera más limpia, que es poner nuestro CSS en un archivo diferente. Voy a abrir Explorer aquí, crear un nuevo archivo, y voy a llamar a esto styles.css. Puedes llamarlo como quieras siempre y cuando sea got.css al final porque eso indicará a Visual Studio Code y al navegador web que se trata de un archivo CSS. Ahora queremos vincular este archivo CSS a nuestro documento HTML y podemos hacerlo dentro de la etiqueta head. Voy a crear un enlace con un atributo rel con el valor de stylesheet, que va a decirle a la página que estamos trayendo una hoja de estilo, y luego href, que es la ruta a la hoja de estilos. Debido a que ambos están en el mismo directorio uno al lado del otro, todo lo que tenemos que hacer es escribir styles.css, el nombre del archivo, presionar Guardar en eso. Para probar si esto está funcionando, vamos por aquí y escribamos nuestro primer estilo. Lo que podemos hacer aquí es hacer un reset. Ya ves ahora tenemos márgenes y relleno que automáticamente vienen del HTML. Lo que podemos hacer es echar aquí este asterisco, los selectores comodín lo llaman. Entonces podemos poner relleno, poner demasiadas Ds ahí. Relleno, podemos establecer a cero y margen podemos establecer en cero por defecto en todos los elementos. Como puedes ver aquí, definitivamente podemos ver que nuestro enlace de la hoja de estilo funcionó aquí porque eso ahora está aplicando. Si entré aquí e inspeccioné mi etiqueta h1, puede ver que nuestro estilo predeterminado que teníamos por aquí ha sido sobrescrito por nuestro asterisco seleccionado aquí. Parece que estos son todos de margen, no relleno, pero si tuviera que hacer clic en esta casilla de verificación aquí, puedo activarla y desactivarla. La otra cosa que podemos hacer aquí es agregar en nuestros propios estilos directamente en el navegador a través de Chrome DevTools. Puedo entrar aquí y dejarme poner todo al color azul. Este no es un ejemplo muy práctico pero como puedes ver aquí, en realidad podemos cambiar el color y probar cosas en nuestro navegador. Ahora bien, si actualizo la página aquí, esto no vuelve a guardar en nuestro documento, pero podemos experimentar con diferentes CSS sobre la marcha dentro de nuestro navegador. Solo tenemos que asegurarnos si hacemos así, así que digamos que hicimos color de todo siendo azul, entonces tendremos que asegurarnos de que podemos simplemente agarrar esta copia y pegarla. Solo tendremos que asegurarnos de que la metemos en nuestra hoja de estilo y la guardaremos, y luego llegará al navegador. Sólo funciona de una manera, no de la otra manera. Si creamos cambios aquí, no va a ahorrar por aquí. Sólo quería señalar eso. De hecho voy a eliminar esto y hablemos de los conceptos principales dentro de CSS y HTML. Aquí puedes ver todo lo que se apila encima de sí mismo. Tienes el h1 y no hay contenido después de él, es todo este tipo de disposición vertical. Pero claro, aquí tenemos algunas excepciones. Tenemos, si yo fuera a envolver algo de esto en una etiqueta de enlace, la etiqueta a y vamos poner un hash aquí como un lugar titular, puede ver que eso se sienta lo que se llama inline. Si inspecciono aquí para calcularlo, puede ver que el estilo de visualización está en línea, pero todo lo demás, el estilo de visualización es por bloque predeterminado, solo hay unos pocos elementos en HTML por defecto que lo hacen en línea, pero en realidad hay varios tipos de visualización diferentes. Podemos hacer grid, podemos hacer Flexbox. Estos son los tipos de visualización CSS más modernos, y son lo que se usa mucho ahora en el desarrollo web moderno. Hablemos de eso. Como mencioné, Web 2.0 es más bien un diseño bidimensional. Lo que voy a hacer es quitar esto. Comencemos con un bloque de construcción común para crear diseños en HTML, que es la etiqueta div. Aquí podemos leer que el elemento div no tiene un significado especial. Simplemente representa a sus hijos. Es una etiqueta muy amplia que por defecto tiene un estilo de visualización de bloque. Voy a poner a Lorem Ipsum en mi primer div y otra vez, Lorem Ipsum en mi segundo div aquí mismo. Voy a golpear Guardar. Como puedes ver aquí, es un poco difícil de decir, pero son bloque de visualización. Si miramos aquí, muestra el bloque, pero simplemente no hay margen por defecto. Pero si extiendo esto, se puede ver que uno se apila encima del otro. Hagamos algo como entrar aquí y establecer un estilo. De hecho, puedo apuntar a todo esto simplemente poniendo div aquí, abriendo corchetes para poner nuestros estilos en. Demos a todos nuestros divs un borde de un píxel sólido para que podamos ver la separación de ellos. Aquí puedes ver que tenemos dos divs, y por defecto son bloques de visualización, lo que significa que se apilan uno encima del otro. Ahora bien, si iba a entrar aquí y establecer un tipo de pantalla diferente. Vamos a mostrar en línea. Ahora se puede ver que si extiendo esto, no están contenidos en dos bloques, entonces ahora tratando de sentarse en línea uno con el otro. Entonces el tercer tipo común en línea no es tan común. En realidad podemos ir en bloque en línea. Como puedes ver aquí, se apilan uno encima del otro. Agrega un ancho máximo aquí de 300, Ahorra, se apilarán uno encima del otro a menos que haya suficiente espacio para que vayan uno al lado del otro. Si vuelvo a aquí, inline, se puede ver lo que tenemos. El bloque en línea es como bloque, pero los bloques terminan yendo uno al lado del otro si hay suficiente espacio. Si hago esta ventana más pequeña, se puede ver que vuelven a apilarse una encima de la otra. Eliminemos eso e intentemos crear un diseño de dos columnas. Quiero tener un elemento para la barra lateral. Crea una barra lateral aquí y luego una para el contenido principal. Ahora bien, si acabo de presionar Guardar en esto, de nuevo, bloque de visualización por defecto, uno se sienta encima del otro. De hecho, vamos a entrar aquí. Para diferenciar estos dos divs porque queremos estilizarlos por separado, lo que podemos hacer es usar un ID o una clase. ID está reservado para un solo elemento así que si iba a entrar aquí, puedo crear una barra lateral de atributos ID. Si hago esto, no puedo darle un ID de barra lateral a ningún otro elemento, de lo contrario, las cosas comenzarán a romperse. Aquí, puedo hacer una clase como alternativa y llamar a esto Principal. La gran diferencia entre class e ID es que con class, podría tener otro div llamado Main. Si tuviera que copiar y pegar eso, podría tener otro div llamado Main y eso estaría bien. Mientras que no podría tener dos divs con una identificación del mismo. Esa es la diferencia entre ID y clase. Cuando estamos desarrollando experiencias front-end, mayoría de las veces estamos usando clases, incluso si solo estamos esperando usarlas una vez. La clase funciona bien para la mayoría de las situaciones. Voy a llamar a esta barra lateral pero en realidad, antes de hacer eso, solo te mostraré cómo apuntamos una identificación en nuestra hoja de estilo por aquí. Usamos el hash para una barra lateral de ID. Entonces pondríamos nuestros estilos aquí, y eso apuntaría solo al elemento con el ID de sidebar. Para Main, qué vamos a hacer porque tiene una clase de main. Usamos un punto, so.main y luego ahora estamos apuntando a todos los elementos que tienen una clase de Main. Yo sólo voy a hacer estas dos clases, así que ve aquí. Barra lateral de clase. Vayamos por aquí y luego pongamos un punto aquí porque ahora en clase, y hagamos que estos se sienten uno al lado del otro. Déjame volver a poner, quiero ver esos bordes para que podamos verlos fácilmente, bordear un píxel sólido, ellos puedan ver y ahora lo que vamos a hacer es la barra lateral, no quiero que sea más grande que, hagamos que sea un ancho de 300 píxeles. Entonces aquí lo que puedo hacer es darle un ancho mayor de 500 pixeles, verás que todavía se apilan uno encima del otro. Vayamos aquí y vamos para ambos, hagamos este display inline-block, actualizando su comportamiento predeterminado de display block. Ahora como pueden ver, se está apilando uno encima del otro todavía probablemente porque no he dejado suficiente espacio. Voy a hacer el área principal 400. Por supuesto, depende de lo ancho que sea tu navegador. Si lo extiendo por aquí, puedes ver que sí se apilan lado a lado, hagamos esto 200 y este 400 y ahora puedes ver que la barra lateral está la izquierda y el contenido principal está a la derecha. Ahora lo que quiero hacer es que la barra lateral se siente al ras las esquinas y la razón por la que no está haciendo eso actualmente es si miramos, entonces tenemos este panel aquí, si pongo esto abajo y miro la etiqueta del cuerpo aquí, mira computado, realidad tiene algún margen predeterminado de ocho píxeles. Como puede ver aquí, margen-inferior ocho, margen-izquierda ocho, margen-derecha ocho, margin-top ocho. De hecho vamos a entrar aquí y apuntaré a todo el cuerpo, no hay punto o hash que vaya antes porque está apuntando a un elemento y luego simplemente eliminaré ese margen predeterminado, así que solo diré margen cero. Entonces se puede ver el margen alrededor de todo el cuerpo, ahora se elimina todo el documento. Ahora aquí estamos usando anchos de píxel, lo que no es muy receptivo porque la altura o las dimensiones de la ventana gráfica como en la ventana en la que estamos viendo esta página, pueden modificar. Lo que quiero es que quiero que esta barra lateral sea tan alta como el espacio disponible, así que lo que puedo hacer es, pongamos aquí un atributo height y, puedo usar una unidad llamada viewport height, y este número antes de la altura de la ventana es el porcentaje de la altura de la ventana gráfica que quiero usar. Quiero usar el espacio total disponible, voy a presionar “Guardar” y ahora como pueden ver, la barra lateral ahora es de altura completa y así es la altura completa de la ventana que la estamos viendo. Si tuviera que cerrar esto, entonces aumenta el tamaño de nuestra ventana y como pueden ver, va todo el camino hacia abajo, eso es lo que queremos de nuestra barra lateral. Entonces también podemos hacer por aquí, es un poco más complicado con el bloque en línea, pero en realidad puedo usar algo llamado calc para hacer una expresión matemática. De hecho puedo hacer la otra unidad de ancho de ventana gráfica. Puedo agarrar el ancho de la ventana gráfica y puedo quitar los 200 que necesitamos para la barra lateral. Pulsa “Guardar” en eso y como puedes ver, no funciona exactamente. Tendremos que finizar esto un poco, tal vez reducir esto en 250, 210 y aquí es donde bloque en línea se vuelve un poco complicado. Entonces si vamos por aquí, puede ver que va a seguir extendiéndose hasta el final, va a ser el 100% de ancho de la ventana gráfica menos el 250. Como puedes ver aquí en principal, está haciendo ese cálculo para cada tamaño de pantalla. Ahora como mencioné, el bloque en línea es un poco complicado y no se usa realmente en el desarrollo web moderno, bloque en línea es de la vieja escuela mucha gente ahora usa Flexbox o grid, así que echemos un vistazo a cómo haríamos esto en Flexbox. Aquí no necesitamos poner display inline block en los elementos individuales, en cambio, lo que voy a hacer es entrar en index aquí, y voy a crear un div, que va a envolver alrededor estos elementos para crear el layout. Voy a llamar a este contenedor de página, podemos poner un guión aquí para separar las palabras y luego voy a cortar esto y pegar esto dentro de nuestro contenedor de página. Este contenedor de página es lo que nos va a dar el diseño, así que solo necesitamos darle estilo. Vamos a entrar aquí al contenedor de páginas, lo vas a poner encima de la barra lateral principal y el orden, y voy a establecer el estilo de visualización, este es el padre de estos dos para flexionar. Voy a darle a “Guardar” en eso. Con solo poner el flex de pantalla, automáticamente obtenemos el contenido uno al lado del otro y flexionando en nuestras pantallas. Si fuéramos a quitar estos anchos, cual voy a hacerlo ahora y presionar “Guardar”, todavía ves que los obtenemos uno al lado del otro, pero no sabe cuánto del espacio disponible usar. Lo que podemos hacer dentro de sidebar es flex 1 y dentro de main también, quiero usar flex 1. Podemos tener un flex de ruta 1 el flex más específico crecerá. Esto es como dice aquí, el factor de crecimiento. Depende de qué otros elementos haya en este contenedor. Pero si pulso “Guardar” en esto, ya verás que obtenemos un diseño receptivo de dos columnas. Si tuviera que mover esto, ya se puede ver porque crecer se establece en uno en ambos, ambos van a tener el mismo ancho y ambos van a crecer al espacio disponible, así que cada uno de ellos tendrá la mitad. Pero aquí podemos cambiar la relación, lo cual voy a hacer y quiero la barra lateral tenga tres veces menos ancho, así que voy a hacer crecer el principal por un factor de tres. Entonces como puedes ver aquí, cuando aumente, la sección principal va a crecer tres veces más que la barra lateral como puedes ver aquí. Pero queremos darle a esta barra lateral un ancho mínimo porque ahí vamos a tener contenido, así que lo que voy a hacer es agregar lo que se llama una base flexible y quiero que sea sobre lo que teníamos antes, 300 píxeles. Le estoy dando un indicador de que quiero que sea de 300 píxeles, aquí se puede ver que ahora está extendiendo esto y luego puedo ir aquí a establecer el factor de encogimiento, le diré cero, lo que significa que nunca se encogerá por debajo de los 300 píxeles, 300 píxeles es un poco demasiado grande, así que vamos 150 irán la mitad de eso. Entonces cuando puedo hacer es resumir todos esos tres atributos en un atributo, solo puedo ir flex, el primero es crecer, el segundo es shrink, y el último es flex basis. Puedo sustituir las tres por esa. Yo haré eso. Golpea “Guardar” en eso. Ya ves que obtenemos el mismo resultado. Ahora bien, si hago clic por aquí, debería haber 150, que como pueden ver, es un poco mayor que 150 y eso es porque el factor flex sigue siendo uno. Voy a ir aquí y cambiar crecer a cero y eso va a asegurar que nunca se haga más grande o menor que 150. En realidad tiene 152 aquí, si entro en cómputelo, se puede ver eso es porque tenemos borde de uno a cada lado, así que si quisiéramos que fuera exactamente 150, tendríamos que quitar el borde, lo que supongo que podemos hacer ahora. Me desharé de esta frontera alrededor de los desarrolladores, golpearé “Guardar ”, y luego si miramos la barra lateral, va a ser 150. Ahora, para diferenciar la barra lateral de la sección principal, vamos a darle un poco de color de fondo y simplemente haremos que el color de fondo sea beige. Puedes ver que tenemos nuestra barra lateral, nunca va a ser menor o superior a 150 y luego el área de contenido principal se va a expandir a cualquier espacio disponible. Se va a sentar junto a eso dentro de este contenedor de página. Ojalá, eso tenga sentido con Flexbox. Es una manera muy agradable, receptiva y flexible para nosotros de crear diseños bidimensionales. Pero de hecho hay una forma más nueva de hacer diseños en CSS y es a través del tipo de visualización de cuadrícula, que hace unos años no estaba disponible en todos los navegadores, pero si lo comprobamos hoy en día. Si buscamos, puedo usar en Google y hacer clic en este primer enlace, en realidad podemos ver cuánta adopción tiene una función. Vamos a la parrilla. cuadrícula CSS, puedes ver que es ampliamente adoptado, ha sido compatible con Chrome desde 2017, Firefox ha sido compatible desde 2017, pero se ve así, así que sí, está bien soportado. Si miras por aquí, es soportado básicamente por el 96.25% de los usuarios en todo el mundo, lo que está listo para la mayoría de los casos de uso. Con cualquiera de estas características modernas que salen, es posible que desee verificar que lo compare con Flexbox. Tienes el modelo flexible, es 99.05% de todos los navegadores se han adaptado a esto. Estos son algunos de los más nuevos de vanguardia, pero la cuadrícula CSS ha estado fuera por un tiempo, como puedes ver, Chrome la apoyó desde hace muchos años, así que deberías ser bastante dulce usando la cuadrícula de visualización. Para demostrar la cuadrícula de visualización, lo que voy a hacer es que voy a crear otro div aquí y voy a llamar a este encabezado, así podemos poner un encabezado que se asiente a través de nuestra barra lateral y contenido principal. Ahora como pueden ver, porque lo he configurado dentro de este contenedor de página que actualmente está configurado para flex, y los va a tener todos en la misma línea. Si quería habilitar el rapeo, puedo escribir flex wrap wrap y luego si uno de ellos iba a ser demasiado grande, digamos que queríamos nuestro encabezado objetivo aquí. Digamos que quería hacer encabezado el ancho, la mitad de la pantalla se puede ver y luego digamos que teníamos una base flex de la mitad de la pantalla aquí también y un flex shrink, así que no va a ser menos de la mitad del ancho de la pantalla de cero, entonces se puede ver que va a ser forzada a una nueva línea, pero en su mayor parte, cuando hacemos algo como esto, se apilará todo en una fila. En fin, eso es Flex-box. Pasando de Flex-box, cambiemos esto a cuadrícula y luego ahora tendremos un estilo de cuadrícula, así que esto va a apilar uno encima del otro porque aún no hemos configurado nuestro diseño de cuadrícula, así que configuramos esto en el padre. Voy a deshacerme de estos atributos de flex box y voy a deshacerme de la altura aquí para deshacerme del ancho 50 y ahora tenemos nuestros tres divs aquí. Vamos a darles formato creando nuestra plantilla de columna, así creamos nuestro div, podemos ir columnas de plantilla de cuadrícula, y lo hacemos a través de fracciones. Voy a crear similar a lo que teníamos antes, una columna que es una fracción y luego la segunda que son tres fracciones, pulsa Guardar en eso y como puedes ver, ahora tenemos ese mismo sistema que teníamos antes, donde la primera columna es tres veces menor que la segunda columna. Si hago clic por aquí, en realidad puedes ver la cuadrícula, así que si hago clic en el contenedor de página, que es donde está la cuadrícula de visualización, realidad podemos mirar las líneas de nuestra cuadrícula. Pero el problema aquí es que nuestra sección de encabezado que queremos extender a través de la barra lateral y principal está en esta primera columna, luego pasa al siguiente div, que entra en la siguiente columna y luego el tercer div se envuelve y entra en esa misma primera columna. No queremos esto, así que lo que vamos a hacer es entrar aquí y escribir inicio de columna de cuadrícula y queremos que comience en la primera línea de la cuadrícula. Si volvemos a aquí, la primera línea aquí cuando aparece, es la primera línea de rejilla, esa ahí está la segunda línea de rejilla y luego del otro lado de aquí está la tercera línea de rejilla. Quiero que empiece en uno y luego podamos ir al final de columna de cuadrícula y podemos conseguir que termine en la tercera línea de la cuadrícula si le doy a Guardar en eso. Ahora puedes ver que el encabezado se extiende por ambas columnas, que es lo que queremos. De hecho podemos ordenar esto, podemos combinarlos en un atributo llamado grid column y luego podemos hacer una barra tres para demostrar lo mismo que simplemente resume esencialmente los dos que teníamos antes, grid column start y grid column end, lo ponemos en el atributo one separado aquí por una barra diagonal. Ahora tenemos ese mismo problema antes o no problema, pero esa misma situación antes, donde hemos establecido que la segunda columna sea tres veces más grande que la primera columna, así que eso significa que cuando crecemos el ancho de nuestra ventana, estamos haciendo que el contenido de la barra lateral crezca en un factor de tres veces menos. Para esta primera columna, voy a envolver esto en un min-max, lo que me permite definir un rango de tamaño, así que voy a hacer el mínimo como auto y el máximo como 150 PX guardar eso y ahora se puede ver que la primera columna nunca va a ser mayor a 150. Ahora lo que puedo hacer también es poner un estilo aquí para la brecha de cuadrícula, y eso creará una brecha entre los elementos de la cuadrícula. Pondremos un hueco de columna y fila, así que si vamos por aquí, puedes ver ahora que tenemos esta zona púrpura que nos muestra la brecha entre columnas y filas. Otra cosa que tenemos aquí es el contenedor de página es el ancho mínimo, puede ser básicamente, queremos hacer este ancho 100 y alto 100% para cubrir el espacio disponible, así como puedes ver aquí, ahora, el contenedor de página está cubriendo todo el espacio. Pero ahora se puede ver que el encabezado simplemente es demasiado grande, así que lo que vamos a hacer es poner en una plantilla de cuadrícula filas su lugar y vamos a poner para la primera fila, 150 para la cabecera y luego la segunda. Hagamos 1 fr, ver cómo funciona eso, creo que 150 es demasiado alto, así que hagamos ese 50, ahí vamos. La primera fila va a ser 50 y luego la segunda va a ser todo lo demás y ahora puedes ver el beneficio de eso es que ahora tenemos la barra lateral extendiendo el pasillo por la página, y solo para que el encabezado sea súper obvio, vamos a darle a esa también un color de fondo. No va a ser la más sexy, pero vamos a hacer que sea un bonito color de fondo, digamos gris oscuro, pulsa Guardar en eso. Ahora puedes ver que tenemos nuestro encabezado en la fila superior, nuestra barra lateral y nuestro contenido principal. Ahora me gusta este hueco de cuadrícula entre la barra lateral y el contenido principal, pero quiero que este encabezado quede al ras contra la barra lateral, así que lo que vamos a necesitar hacer es en lugar de grilla, es brecha de columna y ahora puedes ver que no hay hueco entre las filas, pero hay un hueco entre las columnas, ahí puedes ver. Usando estos estilos, podemos configurar un bonito diseño de cuadrícula y si tuviera que hacer clic fuera de esto, puedes ver que responde y funciona sin importar el tamaño de la ventana de nuestro navegador. Como puedes ver aquí, ahora tenemos nuestro diseño bidimensional empezando a tomar forma. Nuevamente, hay tanto que podríamos cubrir con CSS, podríamos colorear ciertos elementos, podríamos agregar bordes, podemos agregar radio de borde, podemos cambiar el tamaño de fuente, familia de fuentes, obviamente todas esas cosas obvias, pero las cosas que quizás sean menos obvias y más web 2.0 son estas cosas de diseño. El material de diseño es súper importante y fundamental para construir diseños y menos obvio que simplemente decir, quiero que el texto sea de cierto color. Cualquiera puede entender que configurar diseños receptivos es la parte complicada con HTML y CSS y eso es en lo que me he centrado en este video. Podemos simplemente buscarlo en Google si queremos algo específico, como, hacer que esta fuente sea negrita, ¿cómo lo hacemos? Es bastante simple, pero estas cosas son las más complicadas. Como puedes ver, esto es muy diferente a la última lección donde acabamos de tener este contenido básico de estilo que se sentaba uno encima del otro en un formato de información básica, ahora estamos empezando a construir diseños con CSS y moviéndonos más a ese espacio web 2.0. Pero hablando de desarrollo web moderno, algo que es muy importante que hagamos es que nos aseguremos de que nuestro sitio web se vea genial en el móvil, así que obviamente mucha gente usa sitios web en su teléfono en estos días, por lo que es esencial tener un buen diseño móvil. Siempre es mejor asegurarse de que nuestro sitio web responda y funcione bien en cualquier dispositivo por defecto, pero hay ciertos momentos en los que necesitamos crear un estilo específico para un ancho de pantalla específico. Déjame mostrarte cómo hacer eso ahora mismo, así que no quise cerrarlo, solo quiero que lo mueva a un lado. Déjame moverlo por aquí. Si hacemos clic en este pequeño icono aquí mismo, podemos alternar la barra de herramientas del dispositivo. Ahora podemos meternos en diferentes dispositivos aquí. Hagamos iPhone Pro 12. También podemos dar click aquí para ir a diferentes tamaños de pantalla, podemos hacer una tableta de 768 píxeles de ancho, un móvil grande, un móvil mediano, y un móvil pequeño de 320 píxeles de ancho, que creo que casi nadie tiene en estos días, de todos modos. Aquí podemos ver que todo se acaba de alejar, así que no es lo mejor. Lo que quiero hacer aquí es agregarnos una metaetiqueta especial aquí a nuestra cabeza. Sólo voy a pegarlo. Vamos a echarle un vistazo. En realidad, solo fíjate lo que hice después de golpear “Guardar”. Puedes ver que ahora se ha ampliado un poco más y es más adecuado para nuestros diseños móviles o nuestra ventana gráfica móvil. Básicamente la etiqueta es meta con el atributo name de viewport y este contenido a la derecha, ancho es igual al ancho del tablero del dispositivo, la escala inicial 1. Ahora bien, este es el estándar. Yo no lo he escrito. Acabo de copiarlo y pegarlo porque solo tiras esto en cualquier documento HTML y obtendrás esta característica. Es muy básico. No hace falta entrar en detalles sobre cómo escribir esto. Simplemente puedes copiar y pegar esto y funcionará. Estamos aquí abajo ahora en nuestra versión móvil, y puedes ver que tenemos todo igual aquí. Quizá queramos hacer que la barra lateral sea más pequeña en el móvil, pero en este caso, vamos a necesitar todo el espacio que podamos conseguir. Eliminemos esta barra lateral completamente en el móvil. Cómo lo hacemos en CSS es mediante el uso de una media query. Comenzamos con un símbolo at, escribimos medios, y luego aquí necesitamos abrir corchetes y especificar un ancho mínimo o ancho máximo. Un error que podrías tener aquí es que podrías pensar que puse algo así como dispositivo y luego puse iPhone y luego aplico esto a todos los iPhones. Pero en realidad no es así. En realidad tenemos que especificar un ancho. Tenemos que determinar en qué punto de interrupción queremos que ocurra este cambio. Ahora, como puede ver, podemos ver estos diferentes dispositivos y qué anchos tienen. Pero un patrón común es cambiar el diseño en la tableta. En 768 es el punto de ruptura estándar de la tableta. Pero podemos determinar el punto de quiebre como queramos. Incluso podemos salir del modo de respuesta aquí y simplemente reducir nuestra ventana, probarla, leer lo que hay aquí arriba y luego escribir en algunas consultas de medios. No siempre tiene que ser para móviles. Pero aquí lo que podemos hacer es hacer un ancho máximo 768 píxeles, abrir corchetes, y ahora ponemos en CSS regular que sólo se aplicará cuando el ancho sea 768 o por debajo de la ventana gráfica. Déjame entrar aquí, abrir un selector de clase para la barra lateral, y estableceré el estilo de visualización ninguno. Golpea “Guardar” en eso. Ahora puedes ver que la barra lateral se ha ido. Si tuviera que abrir esto, aunque no esté en modo responsivo, mi ancho de pantalla es inferior a 768 en este momento. Si arrastro esto más allá de 768, verás que la barra lateral vuelve. Ese estilo sólo se aplica a lo que lo establecemos. Ahora, la web en estos días se anima a hacer desarrollo mobile-first. Podemos hacer lo contrario de lo que acabamos de hacer aquí. Simplemente depende de cómo quieras hacerlo. Establecer el ancho mínimo de 768. Eso significa que escribimos aquí nuestro estilo predeterminado, asumiendo móvil, y luego escribimos nuestros estilos de escritorio aquí abajo. Eso significa que por defecto, no queremos que se muestre. Entonces una vez que llegue a 768, queremos que muestre bloque. Si pulso “Guardar” aquí, obtendremos el mismo resultado. Si extiendo esto pasado 768, volveremos a obtener la barra lateral. Eso es lo que ellos llaman desarrollo móvil primero, donde escribes el CSS, asumiendo que se va a ver en un móvil, y luego escribir tus media queries para escritorio. De hecho prefiero hacerlo la mayoría de los casos al revés. Me gusta trabajar primero en escritorio y luego crear estilos para un móvil, volviéndolo a mi forma preferida. Ahora se puede ver en el escritorio, tenemos los estilos regulares, pero luego una vez que llega a ser inferior a 768, entonces estos estilos empiezan a entrar en acción. Eso es sólo un ejemplo muy básico. También podemos decir, por ejemplo, si queríamos algo en la tableta, que va a ser un aspecto diferente al móvil. Digamos que nuestro móvil más grande que estamos apoyando, digamos solo 425, en realidad podemos poner entre otros paréntesis aquí, poner en fin. Podemos decir ancho mínimo de 425 y ancho máximo de 768. En lugar de mostrar ninguno en la frontera, en realidad, permítanme cambiar esto a 4-5. Aquí hay algo de superposición, así que voy a hacer 426. Si es al 425, esto se aplicará. Pero si sube a 426, esto se aplicará dado que está por debajo de 768. Solo cambiemos. ¿Qué debemos hacer con la barra lateral? Ahorremos por aquí. Mira nuestra vista de tableta. Vamos a hacer la barra lateral. En realidad en lugar de barra lateral, solo vamos a entrar en contenedor de página, subir aquí y agarrar esto. Hagamos el ancho máximo de la primera columna. Digamos 50 en el tamaño de pantalla. Ahora puedes ver que probablemente sea un poco demasiado bajo. A lo mejor voy a hacer 100. Entonces se puede ver en pantalla el tamaño es mayor que 768, vamos a tener una primera columna que no sea mayor a 150. Pero luego una vez que lleguemos por debajo de 768, vamos a querer que sea máximo 100. Puedes ver aquí que ahora eso aparece en nuestras herramientas de desarrollo. Entonces si vamos menos de 425, así que voy a desplazar esto hacia abajo hasta 425, ahí se puede ver que ya no aplica. La barra lateral, si hacemos clic en aquí, ahora no se muestra ninguno porque esta consulta de medios ya está vigente. Así es como creamos estilos separados para diferentes dispositivos. Se realiza a través de los anchos de la pantalla. No importa si estás en un dispositivo o si estás en un navegador normal y actualizándolo así, incluso podríamos hacer consultas receptivas para pantallas gigantes. Déjame abrir esto y podemos ir aquí a portátil grande, 1440 pixeles. Si voy aquí, podemos ir a una pantalla 4K y echar un vistazo a los estilos en una pantalla 4K. A lo mejor queremos hacer que el contenedor de páginas tenga un ancho máximo para algo. De hecho, podemos afectar cualquier rango de anchos de pantalla o anchos de ventana en los que se esté viendo la página web. No es solo para móviles, sino para móviles, así es como lo apuntaríamos. Descubriríamos el ancho máximo de los teléfonos que deseamos soportar, y luego aplicamos un estilo separado a eso. Yo sí quería lanzar SaaS en este video, pero parece que llevamos bastante tiempo hablando de este tema. Voy a separarme hablando SaaS y ponerlo en la siguiente lección. SaaS es un preprocesador para CSS, por lo que es muy relevante para lo que estamos haciendo aquí. Simplemente nos hace la vida un poco más fácil. Si te interesa SaaS, da click en el siguiente video. De lo contrario, puede saltar a JavaScript. 6. Sass: En esta lección, vamos a hablar de Sass, que significa hojas de estilo sintácticamente impresionantes. Es un lenguaje de scripting preprocesador que se interpreta o compila en hojas de estilo en cascada, también conocido como CSS. Ahora, eso probablemente te pasó por toda la cabeza. Básicamente, Sass, lo que hace es, como hablamos en los videos anteriores, solo hay tres cosas realmente, recargar en el navegador, o que el navegador interprete su HTML, CSS y JavaScript. ¿Dónde entra Sass? Sass en realidad es CSS con superpoderes pero para poder ejecutarlo en nuestro navegador, necesitamos compilarlo en CSS, y ahí es donde entra en juego la parte del preprocesador. Lo que vamos a hacer es pasar por ese proceso ahora y construyamos nuestra aplicación o nuestra página web un poco más con Sass. Voy a arrastrar mi navegador por aquí, haz que esto funcione aquí. En realidad, podría extender esto aquí para la parte de instalación de este video. En el código VS, podemos entrar en nuestro panel Extensiones aquí y podemos cargar algo llamado el compilador Live Sass de Glen Marks. Nuevamente, si no lo tienes instalado actualmente, todo lo que tienes que hacer es buscar en el cuadro de búsqueda de aquí arriba, vivir el compilador de Sass, y luego lo puedes encontrar aquí y después simplemente dar clic en “Instalar”. Para mí, ya lo tengo instalado así que está diciendo desactivar o desinstalar. Básicamente, esta es la forma más fácil de comenzar a compilar Sass en código VS. Solo para que lo sepas, hay muchas formas y muchas herramientas que compilan Sass. Esta es la forma más fácil porque podemos hacerlo sin ninguna configuración adicional. Todo lo que tenemos que hacer es instalar esta extensión especial y luego lo que podemos hacer es ir por aquí. El botón aún no aparece porque en realidad tenemos que crear una hoja de estilos pero podemos ir por aquí y crear un styles.scss. Ahora puedes ver el logo de Sass apareciendo ahí arriba y si presiono “Enter”, ahora puedes ver que está comenzando y ahora tenemos este botón para compilación en vivo de Sass o SCSS en CSS. Esto es técnicamente SCSS y Sass es un poco diferente, pero SCSS es mejor en mi opinión porque CSS es retrocompatible con SCSS. Lo que quiero decir con eso es dejarme mostrarle eso ahora mismo. Voy a agarrar todo este código, cortarlo de styles.css, pegarlo en style.scss. En realidad, he escrito mal eso, se supone que son estilos.scss. Como pueden ver aquí, esto ahora está vacío. Si vamos por aquí, hemos perdido todos nuestros estilos, pero lo que podemos hacer aquí es hacer clic en este botón para Ver Sass. Ahora nuestro styles.css se vuelve a poblar y dependiendo nuestra configuración dentro del compilador Sass en vivo, puedes ver que obtenemos algunos atributos adicionales agregados. Creo que en este caso es solo un atributo extra y una pequeña referencia a un mapa fuente aquí. Puedes ver que tenemos un mapa fuente que nos ayuda a rastrear código desde el código compilado hasta el preprocesador aquí mismo. Como puedes ver aquí ahora tenemos nuestro CSS procesado y ya tenemos todo nuestro estilo. Ahora el último video fue un poco más largo de lo que esperaba. De hecho, iba a construir algunas características más en nuestra pequeña aplicación web aquí. Hagamos eso y luego eso es re-factorial con SCSS. Lo escribiré por aquí. Este compilador de Sass en vivo va a estar atento a cualquier cambio aquí y luego se va a actualizar. En realidad, voy a apagarlo por ahora. Se encienden los botones. Necesito mover esto. Da click en “Viendo”, deshazte de él por ahora y luego eliminaré todo esto por ahora. Ahí me adelanté un poco. De hecho, construyamos esto con CSS un poco más. Quiero en mi barra lateral, crear un menú de barra lateral, así que voy a abrir esto. Lo que voy a hacer es una convención similar a lo que se llama BEM, Modificador de Elementos de Bloque. Básicamente solo una convención de cómo nombro a las clases. Este, porque está dentro de una barra lateral puedo ir a la barra lateral y si te estás preguntando qué es esto, este es Emmett, así puedo hacer punto y luego el nombre de la clase hit tab y creará un div con ese nombre de clase. Voy a llamar a este menú lateral. Entonces puedes ver que tenemos un div pero digamos que queremos que sea una lista para que pueda cambiar, poner el nombre del elemento delante de él aquí, luego dar “Tab”, y ahora obtenemos una lista desordenada con la clase de menú de la barra lateral. Entonces podemos entrar aquí y abrir algunas etiquetas de lista. En realidad, queremos algunos enlaces aquí, así que pongamos algunos enlaces. Pondré el Enlace 1 y luego solo copiaré esto. Enlace 2, Enlace 3, renombrar aquí. Ahora vamos a tener un menú de barra lateral justo aquí y por supuesto no quiero el estilo estándar de enlaces y listas. En esta instancia, podría ser útil dentro del contenido principal, pero aquí estamos tratando de crear un menú así que necesito revertir eso. Voy a entrar aquí antes de las media queries y voy a escribir en menú de la barra lateral y si miramos aquí e inspeccionamos, podemos ver qué estilos son realmente autogenerados para estos elementos. Voy a sacar esto a colación. Aquí podemos ver nuestro menú de barra lateral y puedes ver el tipo de estilo de lista. Si tuviéramos que entrar aquí, vamos a probarlo primero en ese navegador, lista, estilo, tipo, y luego puedes ver aquí podemos cambiar estas cosas aquí. No podemos hacer ninguna. Podemos eliminar esos puntos punteados. Déjame copiar y pegar eso aquí, y luego también lo que estamos sacando de la caja es algo de relleno desde la izquierda de 40 píxeles. Voy a quitar eso también, padding-left: 0. Ahí vamos. Todavía quiero algún nivel de relleno así que lo que voy a hacer es hacer una configuración general para el relleno. Justo dentro de esa sección, voy a hacer que sea de 10 pixeles. Si nos fijamos en el menú de la barra lateral, podemos ver que tiene 10 píxeles de relleno. Todo el contenido dentro del menú de la barra lateral va a ser de 10 píxeles en try like, pero luego también tenemos algún margen en la parte superior e inferior parece así que voy a entrar, voy a mirar computado aquí. Tenemos unos 16 píxeles de margen en la parte superior e inferior. Voy a quitar márgenes poniendo margen cero y ahí tienes. Ahora quiero deshacerme del estilo de la etiqueta de enlace. La forma en que puedo hacerlo en CSS es comenzar seleccionando el menú de la barra lateral y si pongo un espacio, puedo seleccionar niños dentro de ese. Voy a seleccionar los elementos de la lista dentro de él, pero luego dentro de esos elementos de la lista está, una etiqueta para que en realidad pueda hacer dos niveles de anidamiento allí. Voy a buscar las etiquetas de enlace dentro de una etiqueta de elemento de lista dentro de este elemento de menú de la barra lateral. Entonces lo que voy a hacer es, volvamos a hacer referencia a lo que vemos en un navegador aquí, mira hacia abajo. Subrayado de decoración de texto, eliminemos eso. Decoración de texto. Ninguno. Definitivamente queremos que el cursor quede puntero para que indique que es un enlace, como puedes ver aquí. Queremos que el color sea, solo hagámoslo negro por ahora. pegaré a “Guardar” en eso y como pueden ver, ahora se ven mucho más normales. Es posible que queramos hacer que se vean un poco más obvios de que se puede hacer clic en ellos. Lo que podemos hacer es agregar una pseudo-clase aquí. De nuevo, te estoy lanzando un montón de nuevos CSS en este video, pero nuevamente, si quieres profundizar en HTML y CSS, puedes ver mi otra clase. Pero esto de aquí mismo es lo que se llama una pseudo-clase. Aquí pongo dos puntos, y luego pongo hover y entonces lo que podemos hacer es tal vez traer de vuelta esa decoración de texto, pero sólo en hover. Voy a hacer subrayado texto-decoración y luego ahora verás que podemos ver que los enlaces o estamos indicando al usuario que son enlaces cambiando el cursor y subrayándolo. Genial, vamos a crear un menú de cabecera también. Voy a subir aquí y en vez de encabezado, voy a hacer exactamente lo mismo. Voy a crear un UL con una clase de menú de encabezado, entra aquí, y vamos a copiar esto aquí mismo. Guarde eso. Vamos a darle estilo a este un poco diferente. Bajo encabezado, voy a crear un conjunto de reglas para el menú de encabezado. Lo mismo otra vez, eliminar el tipo de estilo de lista, y lo que quiero hacer es que quiero que se muestre no encima de sí mismo. Quiero que se muestre a través de la pantalla. Lo que voy a hacer es display flex. Ahí vas. Ahora que están uno al lado otro, pero están demasiado cerca, así que voy a hacer hueco de columna de 10 pixeles. Ahí tienes, están separados. Entonces voy a usar este otro atributo dentro de Flexbox llamado justify content center y eso va a poner los enlaces en el centro. Ahí se puede ver. Entonces formatear esos enlaces. Nuevamente, podemos hacer exactamente lo mismo que la última vez. menú de cabecera UL LI. En realidad no la UL porque ya estamos dentro de una UL. Entonces pondremos el texto-decoración ninguno y ¿qué vamos a hacer por el color? Negro otra vez, digamos, y tal vez hagamos la misma pseudo-clase. Sólo voy a copiar que puso la pseudo-clase en el extremo para hover y luego podemos darle estilo a nuestro estado hover , subrayado de decoración de texto. Hagamos eso. Voy a golpear “Guardar” en eso. Ahora podemos ver que tenemos nuestro menú en nuestro encabezado y nuestro menú en nuestra barra lateral. Lo que hemos hecho aquí es que puedes ver que hemos hecho algunas anidaciones. Tenemos algunos colores. Lo que podemos hacer en Sass es transformar nuestro anidamiento. Se apagó el compilador de Live Sass. Voy a abrir esto. Lo que vamos a hacer es copiar todo esto. Me dirijo a styles.css, pegaré eso aquí, y luego queremos asegurarnos de que cualquier cambio hagamos aquí vaya a styles.css. No enciendas esto y así tienes tu CSS copiado aquí. De lo contrario, sobrescribirá lo que has escrito aquí. Entonces haré clic en “Ver Sass”. Ahora está viendo. Y debido a que CSS es compatible con SCSS hacia atrás, todo funciona normalmente. Ahora, déjame mostrarte algunos de los beneficios de usar Sass. Si vamos por aquí, ya no vamos a mirar styles.css. Eso es solo para el navegador ahora. Vamos a estar trabajando en styles.css. Lo que podemos hacer aquí es trabajar en nuestro anidamiento. Ahora como puedes ver aquí, nos estamos repitiendo. Tenemos menú de cabecera tres veces y tenemos li y un dos veces aquí. Lo que podamos hacer, podemos agarrar esto, cortar, esto, pegarlo dentro de nuestra regla de menú de encabezado establecida aquí y luego voy a arreglar la sangría aquí. Debido a que estamos copiando a través del menú de encabezado, podemos en su lugar una vez que hayamos anidado dentro, usar el símbolo “y|”. Aquí vamos. Podemos hacer “y”. Ahora pulsa “Guardar” y ya puedes ver que nos metemos en nuestro styles.css, el mismo resultado. Si miro hacia arriba aquí en el menú de cabecera li a y la i hover eso aquí abajo. Están separados en nuestro styles.css, que es lo que necesitamos para nuestro CSS pero aquí están juntos. De hecho, ni siquiera necesitamos el final en esta instancia. Podemos simplemente ir así y entonces el anidamiento aquí se implica poniéndolo dentro del conjunto de reglas. Pero podemos llevar esta anidación aún más lejos. Aquí se puede ver que li y a se repite. De hecho, podemos tomar esta parte y anidarla dentro de aquí poniéndola al final. El final solo toma al padre y luego aplica cualquier selección adicional a eso. Tenemos menú de encabezado, y luego vamos a aplicar estos estilos para vincular etiquetas dentro de las etiquetas de lista dentro del menú de encabezado para que puedas ver cómo comienza a jugar el anidamiento aquí. Todo eso funciona de la misma manera ahora, y lo que podemos hacer realmente para llevar esto incluso un paso más allá, es que podemos usar el símbolo at para construir un nombre de clase por sí mismo. Vea cómo tenemos encabezado y encabezado-menú. Ambos tienen encabezado en ellos. Lo que podemos hacer es agarrar eso, cortarlo, y luego dentro de aquí, podemos hacer un “y” para representar el punto-header y luego podemos lanzar en dash-menu y obtenemos exactamente el mismo resultado. Si miramos el CSS, puedes ver que obtenemos el mismo resultado que antes. Encabezado, menú de encabezado, menú de encabezado li a, menú de encabezado li a hover. Se expande hacia fuera en el CSS necesario pero en nuestro editor de código, llegamos a utilizar este anidamiento loco. Personalmente, me parece útil cuando estoy creando nombres de clase que van más profundo. Por ejemplo, podríamos darle a esto un nombre de clase de enlace de menú de encabezado. Como puede ver, estamos duplicando cada vez las palabras que le preceden. Esto me parece muy útil que puedo usar el símbolo “y”, el ampersand aquí para hacer referencia a la parte anterior y tenerlo todo semánticamente anidado. Ahora todos nuestros estilos de encabezado viven en este conjunto de reglas. Entonces claro que tenemos todos estos conjuntos de reglas anidadas. Podemos hacer lo mismo para el menú de la barra lateral. Lo haré desde afuera adentro, voy a agarrar esta parte, que es la única parte que es diferente a esta. Corta esta parte, y luego pon un “y” para hover. Ahora solo podemos determinar el estado de desplazamiento con los otros estilos para el estado estándar. Y luego, por supuesto, la diferencia entre este selector y este selector es el li a. así que en realidad podemos simplemente agarrar eso, anidar eso aquí, y luego el paso final, podemos agarrar la parte que es diferente de aquí a aquí, que es el menú de guión. Agarra eso, entra aquí agrega el “y”. Deshazte de eso. Ahora, si golpeamos Guardar, mira nuestro resultado. Obtenemos exactamente el mismo resultado. Yo diría que para mí, el mayor beneficio de Sass es esta característica de anidación. Ahora tenemos todo el código de encabezado en un conjunto de reglas. Tenemos todo nuestro código de barra lateral en un conjunto de reglas. Puede resultar confuso cuando intentas buscar en la base de código. Hay algunas desventajas. Por ejemplo, si hago clic en esto y estoy entrando en un nuevo proyecto y quiero encontrar esto aquí mismo entonces entro en el archivo Sass para cambiarlo. No puedo buscarlo así, mientras que podría en CSS. Voy a tener que encontrar menú de barra lateral. ¿Dónde está? Tampoco está aquí. Aquí es donde empieza a ponerse un poco más complicado a la hora de buscar pero por lo demás, me gusta mucho este enfoque de anidación. La otra característica que podemos usar en SCSS son las variables. Puedo ir por aquí y definir variables. Digamos solo el color del encabezado y luego ¿qué tenemos para el color del encabezado? Gris oscuro, y luego haremos un color de barra lateral. Obviamente, si solo lo estamos usando en un solo lugar, no es tan útil, pero a lo mejor es como si pudiéramos almacenar colores de marca aquí. Cosas como colores de botones y cosas así. Componentes que vamos a utilizar de forma regular. Aquí hacemos beige. Y luego en vez de gris oscuro, pondríamos la variable y así cualquier color que esté almacenado en color de cabecera aplicaría aquí. Cualquier color que esté almacenado en color de la barra lateral, solo pasaría por aquí. Si le pego a “Guardar” en eso, verás que obtenemos el mismo resultado. Y siempre estamos obteniendo CSS estándar en nuestro archivo CSS aquí. Si miras aquí, no hay variables, no hay anidación que tenemos en SCSS. Eso es solo el código SCSS. Hace que sea más fácil para nosotros trabajar con CSS nos da características adicionales. Pero es súper importante señalar aquí que el CSS compilado, la parte que en realidad lee el navegador no va a ser Sass. Hay algunas otras características dentro de SCSS. Podemos crear funciones y media queries personalizadas y todo este tipo de cosas pero no quiero ir demasiado complejo en este video y en esta clase. Si quieres profundizar en Sass, tengo una clase sobre Sass aquí en Skillshare. Haz clic en eso si estás interesado en aprender más. Lo principal que quería cruzar aquí es lo que hace Sass. La idea detrás de un preprocesador, podemos crear nuestro propio lenguaje que compila en uno de los tres lenguajes a los que responde el front-end al que responde el navegador y también podemos configurar nuestro entorno de desarrollo con una herramienta como compilador Sass en vivo para compilar este código personalizado, este código que nos hace la vida más fácil como desarrollador en CSS. Con eso fuera del camino, pasemos del estilo por el momento y hablemos de interactividad. Hablemos de JavaScript. 7. Javascript: En este video, vamos a hablar de JavaScript. Javascript es lo que da interactividad a nuestras páginas web en el front-end. He hablado de JavaScript en este canal de skillshare en el pasado. La mayor crítica que he recibido de mis entrenamientos anteriores sobre JavaScript es que no son lo suficientemente prácticos, así que en este video, voy a elegir un ejemplo que sea bastante práctico y del mundo real. Voy a agregar un cajón de barra lateral a esta página web, y vamos a tener un botón para abrir el cajón y un botón para cerrar el cajón. Ese es un ejemplo bastante común del mundo real y uno bastante simple también. No debería tomar demasiado tiempo codificar. Lo que voy a hacer es entrar en index.html. Aquí, ya cerré el expediente SCSS por ahora, y puedo cerrar esto. No quiere decir que ya no esté funcionando. Como puedes ver aquí, sigue viendo, pero simplemente no va a estar tanto en nuestro camino. Podría mantener esto ampliado sólo por un poco. Aquí en el contenido principal, obviamente hemos llenado la sección de encabezado y la sección de la barra lateral, pero no hemos puesto nada en el contenido principal, así que hagámoslo ahora. Vamos a darle un encabezado a nuestra página, y yo solo diré de nivel superior. En realidad, voy a llamar a esta página título. Entonces por debajo de aquí, lo voy a poner en el párrafo sólo para que esto parezca realista. Entonces puedes ver, tenemos un título de página con algún texto de párrafo debajo de él. Entonces aquí, voy a poner un botón. En este botón, voy a escribir Cajón abierto. Como puede ver, tenemos nuestro estilo de botón predeterminado fuera de la puerta. Si coloco el cursor sobre él, se puede ver que cambian los colores. Este es un elemento de botón predeterminado de HTML. Ahora, vamos a tener dos botones en nuestra página web. Para diferenciarlos y asegurarnos de que nuestro targeting sea bastante específico, voy a darle a esto un ID de botón de apertura de cajón. Ahora, nuestro cajón aún no existe, así que vamos a tener que crearlo. Voy a entrar aquí, déjame arrastrar esto otra vez, y voy a crear un nuevo div con la clase de cajón. Dentro del cajón, voy a crear otro botón y voy a darle a este un ID de cierre-cajón-botón. Este botón cerrará el cajón. Después dentro de las etiquetas de botón de apertura y cierre, voy a poner en el texto para ello, que es solo Cerrar cajón. Entonces si miras de cerca, puedes ver que tenemos un div cayendo en nuestra cuadrícula ahora porque está dentro del contenedor de páginas. No queremos esto, así que vamos a mover eso fuera del contenedor de página, y ahora puedes ver que todavía se sienta en la parte inferior porque aún no le hemos dado ningún estilo. Lo primero que queremos hacer, haré dentro de nuestras herramientas de desarrollo, para que veas que esto sucede sobre la marcha. Si presiono este botón aquí, va a configurar una selección para esa clase. Aquí mismo, lo que voy a hacer es escribir posición: absoluta. Lo que esto va a hacer es permitirnos posicionar esto fuera del diseño regular y sobre la parte superior del contenido, que es lo que queremos para nuestro cajón. Ahora voy a posicionar esto de manera explícita. Voy a hacer que sea cero píxeles desde la parte superior y cero píxeles desde la derecha. Entonces queremos darle un ancho de la mitad del ancho de la ventana. Actualmente, no lo podemos ver porque no hay un color de fondo diferente. Vamos a darle un color de fondo negro. También queremos que extienda toda la altura de la página. Voy a crear una altura de 100 por ciento de altura de ventana. Ahora, puedes empezar a ver nuestro cajón formando. Voy a poner un poco de relleno aquí para que el botón no se enrase contra el lado ahí. Entonces asegúrate de no actualizar la página porque esto aún no se ha guardado en nuestro documento, así que voy a copiar esos estilos que acabamos de configurar. Entra en nuestros estilos.scss. Asegúrate de no ir a styles.css si sigues ejecutando Live Sass Compiler o planeas ejecutarlo en el futuro porque anulará esos cambios. Entonces vamos a bajar a antes de las consultas de medios, copiar-pegar en nuestros estilos de cajón aquí mismo. La sangría está un poco apagada, pero como puedes ver cuando presionamos Guardar, compila, actualiza nuestro servidor en vivo, y como puedes ver, tenemos nuestro cajón por encima. Ahora, necesitamos indicar si el cajón está abierto o cerrado. Lo que voy a hacer es bajar aquí y usemos aria, que es una forma en la que podemos indicar el estado de un elemento a los lectores de pantalla. Los lectores de pantalla son una herramienta que las personas con problemas de visión utilizan para los sitios web les lean. Es bueno usar este atributo porque ayuda a esas personas a acceder al sitio web. Vamos a establecer aria-hidden en true aquí indicando al lector de pantalla que este elemento está actualmente oculto. Entonces solo necesitamos entrar en nuestro CSS ahora y escribir una regla de estilo que refleje eso. La forma en que nos dirigimos a un elemento con cierto atributo es a través de estos corchetes, y luego simplemente ponemos el atributo con su valor dentro de esos paréntesis. Para bajarme al lado de la página, voy a derechazar negativo al 100 por ciento. La razón por la que lo estoy moviendo fuera de la pantalla en lugar de ocultarlo así con display: ninguno es porque no podemos agregar ningún fotogramas clave entre encendido y apagado si queremos animar el cajón abierto y cerrado. En lugar de exhibir: ninguno, lo que voy a hacer es derechazar negativo al 100 por ciento. Por lo tanto, no podremos verlo en la página a menos que por supuesto, el usuario haga lo que estoy haciendo ahora mismo, que es desplazar la página horizontalmente. Obviamente, esto no es agradable, así que voy a adentrarme en nuestros estilos para la etiqueta body y establecer overflow-x en hidden. Esto podría ser un problema en el futuro si quisiéramos desplazar la página horizontalmente por cualquier motivo, pero por ahora, este hack funcionará. A partir de este punto, todo lo que tenemos que hacer para abrir este cajón es cambiar el atributo aria-hidden a otra cosa que no verdad porque solo es correcto negativo 100 por ciento. Si el atributo es true, por defecto, va a ser correcto 0. También tengo que poner el estilo aquí para la transición, así que vamos a animar el atributo correcto. Vamos a darle a eso una duración de medio segundo, y la curva de velocidad, vamos a poner a facilitar-in-out. Ahora que tenemos esos ajustes ahí, puedo actualizar este valor a través las herramientas de desarrollo cambiándolo manualmente. En la pestaña Elementos, puedo cambiarlo de verdadero a falso, y luego puedes ver que el cajón se animará en. Si lo vuelvo a cambiar a verdadero, entonces se animará. Ahora, por supuesto, los usuarios no van a entrar en las herramientas de desarrollo y cambiar esto, así que necesitamos JavaScript para proporcionar esta interactividad en el front-end a los usuarios finales. Ahora vamos a crear nuestro archivo JavaScript. Extenderé esta ventana por aquí. En lugar de hacerlo lado a lado por ahora, vamos a abrir nuestro explorador de archivos aquí y crear un nuevo archivo con el nombre de scripts.js. La parte de los guiones no es esencial. Podemos llamarlo como queramos, siempre y cuando lo nombremos con la extensión of.js que es esencial para los archivos JavaScript. Entonces necesitamos vincular este archivo script externo en nuestro HTML. Si bajamos por aquí, pongámoslo antes de la etiqueta de cierre del cuerpo. Podemos crear una etiqueta de script. Dentro de la etiqueta script, podemos poner el JavaScript literalmente aquí, pero en lugar de eso, simplemente vamos a vincularlo a una hoja de estilo externa que es la que acabamos de crear. Yo sólo voy a escribir la ruta a ese archivo que por estar en la misma carpeta aquí, podemos simplemente escribir scripts.js. Para verificar que eso en realidad está enlazando correctamente, pongamos en un simple registro de consola. Todo lo que hace es enviar un mensaje a la consola. Este comando de aquí mismo es muy útil para depurar, pero por ahora, solo vamos a dar salida a las palabras hola mundo. Si vuelvo a mi navegador por aquí, actualizo, y luego pasamos a Consola, puedes ver las palabras hola mundo vienen a través. Si vuelvo a refrescar, puedes ver después de que se cargue la página , luego cargará este texto de hola mundo. Eso verifica que el script esté de hecho vinculado, y así aquí podemos comenzar a construir nuestro JavaScript. Como se mencionó, vamos a usar nuestro JavaScript para abrir el cajón, así que lo que necesitamos es un oyente de eventos en el botón. Entonces ese oyente de eventos va a apuntar a este cajón y luego cambiar el derecho a cero a través de este aria-hidden. Si solo voy falso, entonces se va a abrir y luego vamos a poner otro oyente de eventos en esto para cerrar el cajón. Vamos por aquí y apuntemos a ese primer elemento, este botón Abrir cajón. Refresca por aquí. Cierre el cajón. Cómo lo hacemos es que comenzamos con el objeto documento. Entonces dentro de los objetos de documento tenemos algunas opciones aquí, podemos usar QuerySelector que es un método catch-all que podemos poner aquí un selector CSS y va a agarrar el primer elemento que coincida con este selector. Es lo mismo que en nuestros estilos. Si tuviéramos que apuntar a nuestra barra lateral, podemos hacerlo así. En este caso, estamos apuntando a este botón específico que tiene un ID para que podamos poner el hash ahí y apuntarlo así. O podemos usar el método getElementById, y luego podemos poner en el ID. Ahora tenemos el elemento seleccionado. Lo que podemos hacer es agregar otro método aquí llamado AddVentListener. El primer argumento es lo que vamos a estar escuchando. Vamos a escuchar el evento click. Entonces la segunda es la función que queremos ejecutar. Voy a hacerlo a la vieja escuela así. Entonces dentro de aquí, solo para verificar que este oyente de eventos esté configurado correctamente, solo voy a hacer un registro de consola. Como dije, los registros de la consola son muy útiles para depurar y atravesar un proceso grande. Este es un proceso un poco más pequeño, pero podemos verificar que el oyente de eventos esté funcionando a través de este console.log. Aquí si hago clic en “Abrir cajón”, se puede ver en la consola aquí, clic aparece y si sigo haciendo clic en él, el número al lado de clic sube. Eso es lo que sucede cuando estás registrando valores duplicados en la consola. Eso es bueno. Sabemos que estamos seleccionando el elemento bien y hecho podemos adjuntar código al evento click. Ahora voy a entrar aquí y apuntar al cajón. Para ello, voy a usar QuerySelector. Hay otro ahí llamado QuerySelectorAll y ese es para crear una matriz de elementos en el caso de que se quiera seleccionar múltiples. Solo queremos seleccionar el primero que coincida con nuestro selector CSS y que será cajón. Entonces lo que queremos hacer es ejecutar el método setAtributo y como este es un botón para abrirlo, vamos a establecer el atributo aria-hidden en false, así que no está oculto. Si presiono “Guardar” en esto, vuelve por aquí, haz clic en “Abrir cajón”, y podrás ver que está abriendo el cajón y si miramos detrás escena el código del cajón real, puedes ver aquí aria-hidden es cierto. Mira lo que le sucede a aria-hidden cuando hago clic en este botón. Como puedes ver, está actualizando nuestro HTML y haciendo que esto sea falso. Fresco. Solo tenemos que seguir exactamente el mismo proceso nuevamente con el botón Cerrar. Voy a entrar aquí. En vez de botón Abrir , cerrar cajón-botón y en vez de falso, verdadero, pero podemos reciclar todo el otro código. Refresca por aquí, Abrir cajón, Cerrar Abrir cajón, Cerrar cajón y es tan simple como eso. Ahora bien, este es un proyecto muy pequeño y lo estoy sirviendo localmente, así que no está en Internet. Todo se está cargando súper rápido, pero en el futuro, si quieres poner esto en un entorno de producción, es bueno esperar hasta que todos los elementos de la página se hayan cargado antes de comenzar a cargar estos oyentes de eventos porque existe la posibilidad de que puedas intentar adjuntar un oyente de eventos antes el JavaScript pueda encontrar ese elemento. Lo que voy a hacer es solo por el bien de la integridad, agregar otro oyente de eventos que envolverá todo nuestro código JavaScript. Este se coloca en el objeto de documento. Vamos a agregar un oyente de eventos para este evento llamado DOMContentLoaded como puedes ver aquí. En realidad no dice mucho, pero básicamente, DOMContentLoaded es cuando como se mencionó, se carga el contenido DOM, por lo que se carga el contenido de la página. Voy a agarrar todo esto y luego mover eso ahí dentro. Eso solo asegurará que todo el contenido esté cargado antes de intentar adjuntar estos oyentes de eventos porque obtendremos un error si no podemos encontrar un elemento con un ID de este. Para resolver ese problema de tiempo, pondremos aquí un oyente de eventos adicional. Un ejemplo bastante sencillo ahí, pero bastante común, y espero que estés de acuerdo ejemplo práctico de usar JavaScript para crear interactividad en tu página mientras abres y cierras otro elemento en la pantalla y claro, nos gustaría poner algo de contenido aquí, tal vez algo de navegación, tal vez en el caso de un sitio web de comercio electrónico, podrías tener tu tarjeta de compras aquí, cualquier cosa que quieras realmente, pero ahora al menos tenemos la capacidad abrir y cerrar este cajón usando JavaScript. Si quieres profundizar en JavaScript, obviamente tengo mis otras clases aquí en Skillshare. Puedes ir y ver la clase de JavaScript de Fundamentos de Desarrollo Web para una clase en profundidad sobre JavaScript. De lo contrario, vamos a seguir adelante ahora y hablar de TypeScript, cuyo concepto similar al SAS es un lenguaje de scripting preprocesador, excepto que esta vez es para JavaScript. Eso lo veremos en el siguiente video. 8. Typescript: En este video, vamos a aprender o al menos introducir TypeScript. TypeScript es un concepto similar a SASS versus CSS. CSS obviamente es lo que se ejecuta en tu navegador. JavaScript es también lo que se ejecuta en tu navegador, pero SASS es algo que podemos usar para compilar a CSS para ayudarnos como desarrolladores, lo mismo con TypeScript. Es un script separado que es un superconjunto de JavaScript. Podemos poner JavaScript en TypeScript y funcionará igual que hicimos con SASS, pero la diferencia es con JavaScript, es un lenguaje de programación. Es diferente al CSS en el sentido de que CSS es simplemente hojas de estilo. Las características que hacen que TypeScript valga la pena son muy diferentes a SCSS o SASS. Como menciona aquí, es un estricto superconjunto sintáctico de JavaScript y agrega escritura estática opcional al lenguaje. Esto es muy programador E. Si eres un principiante escuchando esto, esto podría pasarte por encima de tu cabeza. Si quieres saltarte esta lección, puedes sentirte libre de hacerlo , pero quería lanzarlo ya que se usa en el desarrollo web front-end moderno. Se ha vuelto muy popular en los últimos años y mucha gente lo está usando. Para mí incluso me tomó un tiempo entender el beneficio de usar TypeScript, pero al final de esta lección, ojalá, entiendas para qué sirve TypeScript y si realmente quieres usarlo. Deja que esta sea tu introducción a TypeScript. Si no deseas usarlo, no es esencial a menos que trabajes con un equipo de desarrollo en particular que lo use. Si quieres conocer más sobre TypeScript, el sitio web está aquí mismo, el primer enlace al sitio web que aparece en Google. Ahora para poder usar TypeScript, vas a necesitar Node y NPM. Si no sabes cuáles son esos, puedes ir a nodejs.org. Nodejs es un entorno de tiempo de ejecución de JavaScript multiplataforma de código abierto . Esencialmente, todo lo que es Node es la capacidad de ejecutar JavaScript, un lenguaje que fue construido para navegadores web en tu computadora, en un servidor, para que puedas usarlo. Entonces NPM, que significa Node Package Manager, que puedes encontrar en npmjs.com es esencialmente un gestor de paquetes. Somos capaces de instalar diferentes paquetes que la gente crea. Puedes buscarlos aquí. Puedes pensar en estos paquetes como diferentes módulos, diferentes códigos preconstruidos que otras personas han hecho que podemos instalar en nuestro proyecto y globalmente en nuestro sistema. Para verificar que tiene el nodo instalado, puede ejecutar node -v. Después para verificar que tienes NPM instalado, puedes ejecutar npm -v, y luego puedes ejecutar tsc --version para ver la versión de TypeScript que tienes. Si no tienes TypeScript instalado, verás que dice comando no encontrado: tsc. Entonces lo que quieres hacer es ejecutar npm install -g typescript, y eso instalará TypeScript globalmente en tu computadora. Lo que acabas de ver fue un video pregrabado porque ya hice esto, asegúrate de que tengas instalado nodo y NPM. Entonces si no tienes TypeScript instalado, sigue los comandos que acabo de mencionar. Voy a cerrar esto y voy a cerrar esto. Con eso instalado, podemos crear nuestro primer archivo TypeScript. En realidad, antes de eso, necesitamos crear un archivo tsconfig.json aquí, que es solo nuestro archivo de configuración TypeScript. Aquí puedes ver que está en este formato llamado JSON, que es solo una forma de almacenar datos. Déjame arreglar la sangría aquí. Se puede ver que hemos abierto este objeto. Hemos agregado este objeto de opciones de compilador y luego hemos agregado es5 para target, commonjs para módulo y configuramos source map en true. Como puede ver en estos comentarios, he tratado de explicar qué está haciendo cada uno de estos. Este primero establece la versión de destino de JavaScript en la que deseamos compilar. El segundo establece el estilo de módulo. Entonces al establecer el mapa fuente igual a true, es decir, en el momento en que transpire nuestro TypeScript, también va a generar un archivo de mapa y ese archivo es el que mapea el archivo JavaScript transpiled al archivo TypeScript original, permitiendo que el código TypeScript original se reconstruya mientras se depura. Como dije, esto se está poniendo un poco técnico y un poco de alto nivel, pero veremos que esto funciona muy pronto. Lo que ahora podemos hacer con nuestro archivo de configuración de TypeScript aquí es ejecutar el comando TSC, que significa compilar TypeScript, pero claro, primero necesitamos un archivo TypeScript. Lo que voy a hacer es igual que hicimos con styles.css. Vamos a cambiar el nombre de esto a ts y ahora esto se convierte en un archivo TypeScript. Recuerda, TypeScript es un superconjunto de JavaScript, por lo que es compatible con versiones anteriores. Podemos simplemente poner JavaScript puro en un archivo TypeScript y debería funcionar. Entonces abramos una terminal. Cambiaré a aquí para hacer terminal y luego simplemente ejecutemos tsc para compilar TypeScript. Ahora puedes ver que nuestro script.js y nuestro archivo scripts.js.map ha sido creado. Si miro adentro aquí, verás que es exactamente lo mismo aparte de que tal vez se borren algunos espacios en blanco y luego este comentario aquí que mapea este archivo al mapa fuente, que como dije, cuando estábamos configurando el archivo tsconfig, nos permite mapear el archivo JavaScript al archivo TypeScript original y eso nos ayuda a la vez depuración. No te preocupes demasiado por el mapa. Vamos a estar trabajando con este archivo y luego por supuesto que vamos a estar aquí todavía cargando en el mismo archivo scripts.js de salida, que actualmente se ve igual que nuestro archivo TypeScript, pero eso es porque en realidad no hemos modificado esto para que sea más TypeScript E. Ahora la razón por la que se llama TypeScript es porque podemos ser más específicos aquí en TypeScript definiendo qué objetos son qué tipos porque en JavaScript se escribe muy vagamente, por lo que no suele estar claro qué tipo son los objetos. De hecho, podemos especificar ciertos objetos como ciertos tipos. Hagámoslo ahora mismo. Como pueden ver aquí, sigo haciendo referencia a objetos similares. He hecho referencia al cajón dos veces y luego he hecho referencia al botón del cajón abierto y al botón del cajón cerrado. Vamos a moverlas a sus propias variables. En realidad, vamos a moverlas a constantes. Hay dos formas de establecer un valor, mientras que en realidad existe la var original en JavaScript, pero ahora preferimos usar const o let. Vamos es si esperamos que el valor cambie más tarde. Pero cuando estamos apuntando a elementos DOM específicos, no esperamos que nada cambie. Sólo estamos creando una referencia a ese elemento. Si puedo aprender a deletrear correctamente, solo puedo copiarlo y pegarlo en realidad. Puedo agarrar eso y luego configurarlo para abrir el botón usando el estuche Pascal ahí y luego puedo apuntar al botón de cerrar agarrando esto aquí mismo. Estamos refactorizando nuestro código aquí. Obviamente, este código funciona, pero solo lo estamos haciendo un poco más agradable. Recuerde que TypeScript y SASS son para la experiencia del desarrollador, no para el usuario final, y entonces este es el cajón. Voy a llamar a esto el cajón. Entonces tenemos todas nuestras referencias ahí arriba. Ahora lo que puedo hacer es refactorial esto, reemplazar donde este aparece en el código con este nombre de variable o este nombre constante. Voy a entrar aquí, voy a abrir el botón. También vamos a agregar el oyente de eventos. Esto simplemente se convierte en cajón. Esto se convierte en CloseButton en el caso Pascal, CloseButton, y luego el cajón nuevamente. Simplemente podemos reemplazar esto con cajón. Ahora bien, si pasamos el cursor sobre OpenButton, puedes ver que dice HTMLElement. Ese es el tipo. Si pasamos el cursor por aquí, HTMLElement y luego aquí está Element. Podemos ser más específicos y comenzar a escribir algo de mecanografía aquí diciendo como y volviéndonos más específicos. El botón de cajón abierto es en realidad un elemento de botón HTML. Podríamos entrar aquí y escribir esto: HTMLButtonElement. Ahora bien, si pasamos el cursor por aquí, verás que el tipo ahora es más específico. En lugar de HTMLElement, ahora está establecido en HTMLButtonElement. Si el tipo no ha sido detectado automáticamente, podemos especificarlo aquí como ButtonElement. Entonces éste es solo Element. Aquí podemos decir HTMLDivelement. Ahora nuestro código sabe exactamente qué tipo de elemento es este, pero esto todavía no es particularmente útil. Fue difícil para mí encontrar un ejemplo realmente práctico pero simple de usar TypeScript con lo que hemos construido hasta ahora, pero he descubierto una manera incorporar una función aquí, y voy a llamar a esta función TogkleDrawer. Dependiendo del estado del cajón, lo va a abrir o cerrar y de hecho podemos crear un botón si quisiéramos que haga tanto abrir como cerrar con este método. Voy a crear la función una nueva manera escolar y voy a poner aquí una variable para especificar si la queremos abierta o no abierta. IWantiTopEN es como lo llamaré y luego usaré la sintaxis de flecha para crear la función. Ahora tenemos una función con un solo argumento. Aquí voy a hacer un simple si entonces. Diré, si iWantiTopen, entonces vamos a establecer el atributo de aria-hidden en el cajón a false. De lo contrario, lo vamos a establecer en verdad. Ahora bien, si le pego a Guardar y me pongo el cursor sobre, se puede ver que después de IWantiTopen, dice cualquiera. Aquí dice que el parámetro IwantiTopen tiene implícitamente un cualquier tipo, pero se puede inferir un tipo mejor del uso. En lugar de que el parámetro sea un tipo cualquiera, podemos especificar de qué tipo necesitamos que sea. Obviamente usándolo como booleano aquí, así que voy a poner dos puntos aquí y decir booleano. Para aquellos de ustedes que no están tan avanzados en programación, booleano significa solo un valor verdadero o falso. Ahora nos estamos asegurando de que cuando ejecutamos este método, definitivamente tenemos un argumento booleano pasando por el método. Lo que voy a hacer aquí abajo es en el click de OpenButton, voy a ejecutar esta función llamada TogkleDrawer, y queremos que se abra en esta instancia, así pasaré por true, y no tenemos ningún error apareciendo. Eso es bueno. Entonces aquí abajo, voy a poner a TogkleDrawer falso. He escrito todo bien aquí, así que nada está apareciendo mal. Si compila el TypeScript, y se puede ver aquí se compila a JavaScript. Entonces puedo abrir y cerrar esto. Obtenemos exactamente el mismo resultado. ¿Por qué usaríamos TypeScript? Bueno, digamos que no estábamos usando TypeScript y accidentalmente metí, digamos una cadena aquí. Si esto fuera un archivo JavaScript, no obtendríamos estas líneas onduladas por aquí porque no hubiéramos especificado que el argumento tiene que ser un booleano. Vamos a agarrar esto y voy a poner esto directamente en scripts.js aquí. Entonces claro que no podemos escribir eso porque ya no estamos en TypeScript. Solo voy a eliminar todo este código de TypeScript y simplemente dejar el código JavaScript. Voy a golpear Guardar. Todavía tenemos este de aquí. Hemos actualizado nuestro scripts.js y hemos puesto el valor de cadena de true y el valor de string de false aquí. Eso podría parecernos bien. Si actualizamos la página por aquí, haz clic en 'Abrir cajón', la abrirá, pero no la cerrará. ¿Por qué es eso? Eso es interesante. Si entramos en nuestra consola, no habrá errores, porque desde la perspectiva de JavaScript, no hemos hecho nada malo. Eso es lo que quiero decir con lenguaje vagamente mecanografiado. No es JavaScript muy estricto, así que puedes hacer estos errores y no hay ningún error, así que no sabes cuál es el problema o cómo solucionarlo. El problema aquí es que estamos buscando un booleano aquí si ifWantitoPen. La verdad es que cualquiera de estos va a aparecer como cierto porque ambos no son cadenas vacías. Si entro aquí y asumiendo que siempre está saliendo como cierto, entonces este registro de consola debería ejecutarse. Sólo voy a decir, IwantiTopen es verdad. Si le pego a Guardar en eso, vaya por aquí, y veamos nuestra consola. Si hago clic en 'Abrir cajón', IWantiTopen es cierto, sí, lo suficientemente justo. Pero si hacemos clic en Cerrar cajón, sigue diciendo que IwantiTopen es cierto. Eso es por algo en JavaScript llamado valores verdaderos. Una cadena no vacía es un valor verdadero, así que por lo tanto es cierto aunque el contenido del texto sea falso. Ahora claro, ese es un pequeño error que podría ser difícil de descifrar en JavaScript, pero si estuviéramos ejecutando TypeScript, puedes ver aquí que obtenemos estas líneas rojas onduladas. Dice que un argumento de tipo cadena no es asignable al parámetro de tipo booleano. Se especificó que tiene que ser un booleano aquí arriba junto a nuestro argumento, así que solo se espera un booleano y por lo tanto obtendremos un error incluso antes de ejecutar la compilación. Entonces si le pego a tsc, se puede ver que ni siquiera nos deja compilar porque se determinan errores antes incluso de llegar al resultado final, incluso antes de que lleguemos a producción. Eso es bueno. Preferimos capturar nuestros errores al principio nuestro desarrollo que verlos ponerse en marcha y luego tener que averiguar el error. Eso es lo que es el beneficio de TypeScript. Como puede ver, no nos permitirá compilarlo hasta que solucionemos este problema. Simplemente escuchamos el mensaje de error dentro de TypeScript, y luego los devolvemos a los booleanos. Hemos eliminado todas las líneas onduladas. Volvamos a ejecutar tsc. Genial. No hubo errores. Si vuelvo a ejecutar mi página web, ahí puedes ver que todo está funcionando bien otra vez. Ahí vas. Eso es TypeScript. Eso es todo lo que voy a entrar hoy. TypeScript, de nuevo, es uno de estos temas en los que podrías crear un curso de cuatro horas crear un curso de cuatro horas y es más el programa E, así que no realmente para principiantes, pero si lo ves en uso en un proyecto, al menos sabes lo que está haciendo. Realmente es una olla de desarrollo web frontend moderno estos días aunque sea un poco más complicado de entender. Yo quería incluirlo para que ustedes puedan ver algunas de las herramientas que utilizamos en el desarrollo web frontend en acción. Ese justo ahí probablemente sea una de las lecciones más avanzadas, probablemente la lección más avanzada de esta clase. Me estoy moviendo muy rápido por aquí. Enhorabuena si sigues al día. Lo voy a dejar ahí para TypeScript. Pasemos a hablar frameworks de JavaScript en el siguiente video. 9. Marcos de Javascript: En este video, hablemos de frameworks front-end. Actualmente tengo el estado de JavaScript. Es una encuesta anual. Tengo el sitio web para eso en mi pantalla aquí mismo, y hablaremos sobre algunos de los frameworks front-end de JavaScript más populares solo haciendo un poco. Pero antes de entrar en eso, quiero dar un paso atrás y discutir jQuery. jQuery fue la biblioteca de JavaScript de la que hablé en mi primera clase de Skillshare llamada Understanding Web Development, y jQuery era muy popular en esos días, allá por 2018 y antes, porque lo que se llama JavaScript Vanilla, que es Javascript sin ninguna biblioteca o frameworks, no estaba tan avanzado como lo es hoy. Entonces, como viste en el video que acabamos con TypeScript y JavaScript, pudimos hacer todo esto sin ningún jQuery, y ahora podemos hacer tantas de las funciones que jQuery nos permitió hacer en las versiones más modernas de JavaScript. jQuery se ha vuelto cada vez más obsoleto, pero ese no es el único factor. Hay otro factor, y es que ahora nos estamos adentrando más en este mundo de aplicaciones web, donde los sitios web se están volviendo mucho más como programas que se ejecutan en tu navegador y menos como sitios web con mínima funcionalidad. Si tienes alguna experiencia con jQuery o he tomado la clase antes, sabrás cómo funciona jQuery. Es muy similar a lo que hicimos por aquí donde agarramos diferentes elementos. Les agregamos oyentes de eventos, y luego, si se activaran ciertos eventos, activaríamos otras cosas. Podemos hacer todas las cosas trabajando con el DOM, también conocido como el Document Object Model, que es básicamente todos los elementos dentro de nuestro documento HTML. Podemos modificarlos usando jQuery, pero ahora casi con la misma facilidad a través de Vanilla JS. Vainilla, de nuevo, lo que significa que no está adherida a ninguna biblioteca o framework. Es solo JavaScript puro. JavaScript como el propio lenguaje se ha puesto al día en términos de funcionalidad. Pero para las cosas en las que estamos administrando el estado, como estamos trayendo datos al front-end y luego los estamos manipulando en el front-end en tiempo real, comenzamos a beneficiarnos de algo así como un framework front-end. Ahora, sé que eso suena muy conceptual y teórico en este momento, pero verás como construyo algo en Vue en esta lección, cómo realmente tiene sentido usar un framework front-end. Antes de hacer eso, veamos algunos de los marcos y bibliotecas front-end populares que se utilizan hoy en día. Aquí, según la encuesta, puedes ver cuáles son populares, cuáles están en declive, cuáles están en pendiente para cuando estés viendo este 2022 podría no ser las encuestas más recientes así que vuelve a consultar el estado del sitio web de JavaScript y podrás ver qué frameworks siguen siendo populares, cada vez menos populares, haciéndose más populares. Pero los tres grandes principales son React, Vue y Angular como se escribe aquí. Pero como puedes ver, Angular realmente ha buceado en popularidad, y este llamado Preact, que nunca antes había usado es más popular que Angular por apariencia de cosas. Ember era algo que en su día era popular pero que sigue declinando. Svelte se ha vuelto muy popular. Hay nuevos apareciendo todo el tiempo. Es realmente una locura. Simplemente hay demasiados de los que hablar. Pero los que han existido por un tiempo, React, Vue y Angular, siguen siendo bastante populares. Obviamente, Vue ha disminuido un poco, pero React también ha disminuido un poco, pero eso es porque la competencia ha aumentado y están todas estas nuevas, pero las tres principales fueron React, Vue y Angular. Ahora, la mayor parte de mi experiencia es con Vue JS, creo que es fácil comenzar con Vue y es la que más uso. En este video voy a demostrar lo que hace un framework front-end en Vue, pero los mismos conceptos de usar un framework front-end deberían aplicarse a React, Angular o cualquiera de estos otros frameworks front-end. Ahora, antes de construir alguna interactividad front-end con Vue, veamos un ejemplo en el mundo real. Aquí mismo hay un sitio web de comercio electrónico que ayudé a crear, y Vue se usa en muchos lugares aquí. Si entramos en una página de colección, echemos un vistazo a la colección de botas viejas. Si nos desplazamos hacia abajo, puedes ver que aquí tenemos estos filtros. Podemos filtrar por hombres, mujeres o niños, y ese filtro se agrega aquí, y esto es todo sin recargar la página. Tenemos mucha interactividad front-end aquí. Esto en realidad está utilizando una API y cavando en los datos de back-end. Pero como puedes ver aquí, no se encuentran productos dentro de esos rangos de precios, y podemos filtrar por color, y esto nos está proporcionando interactividad front-end. Aquí tenemos nuestro estado, que es el estado de los filtros de colección, y puedo actualizar el estado sobre la marcha y la página responde a eso. Lo mismo se puede decir si nos fijamos en un producto en particular. Puedes ver aquí la selección de variantes. Aquí, no hay mucho cambio cuando cambiamos la variante, pero como puedes ver aquí, la Talla 7, solo queda una. Si cambiamos a 7.5, es determinar automáticamente el nivel de stock y mostrarnos una notificación de bajo stock. Algunas de estas tienen múltiples variantes, creo que la negra de aquí. Podemos cargar más dinámicamente por aquí. Aquí vamos, el de Kununurra, creo que tiene múltiples dimensiones. Puedes ver aquí, si seleccionamos algunas opciones y encontramos una variante que no existe, dirá, lo siento, esto no está disponible y nos ocultará el botón Agregar al carrito. Pero si seleccionamos uno que esté disponible, tenemos un carrito aquí, y este carrito también es Vue. Podemos actualizar el número de artículos en este carrito, y luego el subtotal aquí y el subtotal aquí va en aumento, e incluso podemos eliminar esa línea de pedido completamente todo sin recargar la página. Puedes ver que tenemos algunas funcionalidades de la aplicación dentro de nuestra página de inicio. Este es un gran paso adelante con respecto a la Web 1.0, que solo está mostrando información en la página. Vamos a crear realmente una funcionalidad de tipo similar aquí. Vamos a refactorizar el código del cajón y luego agregaremos algo más. Para el Cajón, saquemos ese botón del contenido principal, y tal vez pongamos eso en el menú de la barra lateral. A ver. Cajones abiertos, cajón cerrado. Bien, genial y luego vamos a reemplazar esto con una página de producto. Tengan paciencia conmigo aquí, voy a crear un div de producto y dentro de este div de producto, voy a tener dos columnas, una para la información del producto y luego otra para la imagen, y hagamos esto estático para empezar. Voy a agarrar un par de imágenes e insertarlas en nuestra carpeta aquí. El producto en cuestión va a ser un zapato, así que tenemos blanco con raya negra y la segunda variante va a ser la opuesta negra con raya blanca y estas son ambas imágenes WebP. Voy a volver aquí y comencemos con negro con raya blanca. Voy a poner esa imagen ahí, y luego voy a poner en la información del producto para este zapato, que es un zapato Nike. Se trata de una Nike Air Force 107. Creo que el nombre Fuerza Aérea es de dos palabras. Entonces voy a crear un div con la clase de precio aquí. Voy a poner el precio de 170 por debajo de él. Voy a poner en un desplegable para seleccionar qué variante queremos. Esto lo hicimos en el video en HTML. Podemos ponerlo en la opción, negro con raya blanca. Lo único que no lo hicimos última vez es establecer un valor para esto. El valor es que esto va a ser negro con raya blanca. Ahí vamos, y entonces el segundo valor va a ser lo contrario. Blanco con raya negra y luego aquí, blanco con raya negra. Voy a golpear “Guardar” en eso. Echemos un vistazo a cómo se ve eso en nuestro navegador. Como puedes ver aquí, la imagen es gigantesca y hay algo de estilo que hay que hacer aquí. Volvamos. Todavía estamos usando SAS aquí. Entra en styles.css, y vamos antes de las consultas de medios. Esto no se supone que esté aquí, eso solo se supone que está en el CSS de salida. Voy a deshacerme de eso, y luego aquí podemos poner los estilos para el producto, y como estamos usando SAS, podemos usar todo el anidamiento disponible para nosotros. Lo que voy a hacer es, no voy a hablar demasiado mi patrón de pensamiento con estos estilos porque ya hemos hablado de CSS, pero solo voy a tirar algunos estilos aquí para ponernos en marcha porque en esta lección, vamos a tratar de aprender sobre Vue. Voy a configurar el producto para mostrar la cuadrícula y luego nuestras columnas de plantilla van a ser 1FR, una, así que dos columnas de igual tamaño. Voy a hacer que el ancho máximo de esta área sea 100%. A veces los límites de la imagen pueden salir de su contenedor, así que queremos evitarlo. Voy a darle a toda esta área un poco de relleno, 20 píxeles de relleno, y luego un hueco de columna entre esas dos columnas de 20 píxeles también, y luego porque estamos usando SA, puedo simplemente anidar la imagen que está dentro del div con productos y puedo afectar eso también. Nuevamente, queremos que el ancho máximo sea del 100%, y no creo que necesitemos especificar inicio y fin. Si voy por aquí, está bien. Eso debería funcionar. No estoy seguro de por qué es así. Mal funcionamiento un poco aquí. Déjame cargarlo otra vez. Ahí vamos. Aquí vamos. Todavía podemos abrir nuestro cajón o podemos mirar nuestra página de producto y ver nuestra imagen ahí. Creo que tiene más sentido tener la imagen en el lado izquierdo. Voy a moverlo. Imagen a la izquierda y luego información del producto a la derecha. Aquí puedes ver cuándo cambiamos nuestro desplegable aquí, no pasa nada porque claro, necesitamos actualizar la imagen, el precio si es necesario, y cualquier otra información cuando actualicemos con aquí. Ahora, primero probemos esto en JavaScript Vanilla y veamos cómo funciona. Esta vez no lo voy a poner en los guiones aquí. Lo que voy a hacer es ponerlo en línea para que podamos verlo en la misma página. Vaya por debajo de aquí, debajo de los productos, y escriba el guión. Antes de escribir cualquier oyente de eventos para interacción en la página, voy a crear una matriz de varianza, así que voy a decir product_variants. No creo que necesitemos esto ahora mismo. Danos un poco más de espacio. Eso es lindo. Entonces voy a abrir una matriz, y esta va a ser una matriz de objetos. Hagamos los primeros atributos. Entonces cada variante va a tener un ID dado un ID de un estilo. Esto sólo va a ser lo que hay en este campo de valores, así que el primero va a ser negro con rayas blancas o raya blanca singular más bien. La imagen va a enlazar a la dirección de la imagen. Con el negro con raya blanca, lo tenemos ahí. Simplemente copia esa dirección, y luego el precio de 170. Voy a copiar este objeto, crear la segunda variante basada en eso. El ID va a ser dos, y luego en vez de negro con raya blanca, blanco con franja negra. Entonces hagamos eso ligeramente diferente en precio para que podamos tener otro cambio de cosa en la página. Pero en realidad, ambos tienen el mismo precio en el sitio web de Nike. Entonces ahora podemos comenzar a escribir nuestros oyentes de eventos. Como te mostré antes, quiero asegurarme de que los elementos de la página se hayan cargado primero, así que voy a agregar un detector de eventos para ese evento DOM contenido cargado, luego abrir una función aquí. Ahora esto solo se ejecutará cuando todo en la página se haya cargado, y así cuando ese sea el caso, voy a apuntar a este selecto aquí. Vamos a darle una clase, clase de productos, seleccionar variantes. Vamos a llamarlo así. Voy a ir aquí abajo. Documentos. En realidad, vamos a dividir estos. Se puede ver aquí arriba. Hay un selecto aquí al que estamos apuntando. Documentos, selector de consultas, y luego podemos dirigirlo por esa clase. Recuerda que estamos poniendo el punto ahí primero para significar clase, selección de variante. Eso nos va a dar el elemento select, que es el desplegable, luego vamos a agregar un detector de eventos para el evento de cambio. Cuando eso cambie, entonces vamos a escribir aquí una función. Voy a cerrar esto. De hecho queremos agarrar el elemento donde está ocurriendo el cambio, así podemos hacerlo poniendo aquí un argumento y luego lo que podemos hacer es consola, cerrar la sesión. Antes de adelantarnos más, solo verifiquemos que esto está funcionando. Voy a poder encontrar los objetivos actuales del evento, así que eso significa el elemento sobre el que se ha desencadenado el evento. Vamos a abrir nuestra consola, y luego si cambio esto, puedes ver que obtenemos el HTML para que el select vuelva a nosotros. Lo que voy a hacer es encadenar el valor aquí, presionar “Guardar” actualizar, y aquí se puede ver que el valor es blanco con raya negra. Cuando selecciono negro con raya blanca, estamos recuperando el valor. Ahora lo que podemos hacer es comentarlo y vamos devolver el objeto de esta varianza ahora que sabemos cuál estamos tratando de seleccionar. En primer lugar, voy a almacenar ese valor como su propia constante, así que voy a decir que el estilo seleccionado constante es igual a ese valor que viene a través. Después voy a seleccionar la variante del producto usando un método Find. Lo que podemos hacer es apuntar a toda la matriz aquí arriba, y luego podemos encontrar un elemento específico en la matriz usando find. Esto podría parecer un poco funky pero dentro de la función aquí, somos capaces de pasar por cada una de las varianzas, así que voy a escribir variante, nombra eso. Entonces aquí ponemos la condición después de la devolución del objeto variante que deseamos volver. Estilo de variante de retorno, que es el atributo que estamos tratando emparejar con nuestro estilo seleccionado actualmente. Ahora, vamos a registrar la consola para ver si tenemos ese objeto regresando con éxito. Variante de producto refrescar por aquí. Ahora bien, si cambio a aquí, pueden ver que recuperamos todo el objeto ahora. Podemos usar este objeto para actualizar todas las diferentes cosas en nuestra página de producto. Entonces es solo una simple cuestión de especificar en todas partes queremos que esto cambie. Necesitamos seleccionar todos los diferentes elementos y actualizar manualmente sus atributos. Echemos un vistazo a la imagen, así iremos a document, query selector, y luego haremos productos, image. Estamos usando un selector CSS para encontrarlo aquí, y luego actualizaremos este, el SRC a la nueva variante de producto que hemos seleccionado, y encontraremos el atributo Image de esa. Entonces vamos a actualizar el precio, que creo que es el único otro aquí hasta que empecemos a agregar más precio del producto, y luego para ese, solo necesitamos cambiar el precio del punto de variante del producto HTML interno para sacar el precio del objeto. Bien, pulsa “Guardar”, actualizar, y ahora puedes ver cuando se activa el evento change, determinamos el objeto que tiene toda la información, y luego cambiamos manualmente el HTML interno de este elemento y el SRC de este elemento para cambiar la imagen que se alinea con el objeto recién seleccionado. Ahora cuando un ejemplo sencillo como este, sólo hay dos puntos en los que estamos cambiando la información. Está perfectamente bien usar JavaScript Vanilla aquí. Pero el tema que tenemos aquí, no es realmente un tema, pero es algo que se puede mejorar es que tenemos que especificar. Esto comienza con un cierto SRC, con cierta imagen, y esto comienza con una determinada opción seleccionada, un cierto precio, y luego en cada selección necesitamos encontrar la variante de la lista aquí, lo cual está bien. Pero luego tenemos que actualizar manualmente todos los elementos. Aquí sólo hay dos, así que no es gran cosa. Pero cuando empezamos a tener un proyecto más grande, va a haber una descripción del producto, tal vez diferentes variantes, datos que se alimentan de los otros datos, puede llegar a ser inmanejable. Por eso tenemos algo así como un framework front-end. Tenemos un framework front-end por múltiples razones, pero una de las grandes razones es la reactividad. Ahora, para entender esto, vamos a tener que verlo en acción. La forma en que lo voy a hacer ahora es que vamos a refactorizar este código en Vue. Ahora hablemos de Vue. Vue es uno de los tres frameworks front-end populares que mencioné al inicio del video. React Vue y angular, y Vue es el framework front-end con el que más experiencia he tenido, así que voy a usar Vue como ejemplo para este video. Vue también es muy fácil de configurar y llevar a cualquier proyecto en la web. Ya sea que use la CLI para crear una aplicación completa basada en Vue, o simplemente la traiga a ciertas páginas. Vue es bastante flexible, y por lo tanto, me gusta usarlo y creo que es una buena opción para este video. Si quieres conocer más sobre ello, puedes ir a Vue js.org. Hay diferentes formas de instalarlo, pero vamos a usar el método CDN. CDN, es decir, Red de entrega de contenido. Básicamente podemos traer el script desde una fuente externa, y luego comenzar a usarlo en cualquier archivo HTML. Voy a hacer eso, no voy a usar este de aquí mismo. Voy a usar, si volvemos aquí, vamos a comentar esto ahora porque vamos a hacer esto en Vue. Antes de la etiqueta script, voy a insertar nuestra referencia a lo que sea la última versión de desarrollo de Vue, que es lo que obtendremos de aquí, https://umpkg.com/vue@next. Entonces lo que vamos a hacer es debajo aquí es crear nuestra aplicación Vue. Necesitamos un objeto options, así que voy a llamar a esto options. Esto va a ser un objeto y aquí es donde ponemos en todos nuestros ajustes para la app Vue, y luego aquí voy a escribir Vue crea app. El primer y único argumento va a ser esas opciones, ese objeto que contiene las opciones. Entonces voy a encadenar un método de montaje por puntos, y luego tenemos que averiguar dónde estamos montando esto. Vamos a entrar en esta área principal aquí, y vamos a ejecutar la aplicación en este div. Creo que ya estamos dentro del div, así que vamos a salir. Aquí está el div completo para la sección principal, así que voy a copiar y pegar eso o cortar y pegar eso a debajo. Queremos mantenerlo fuera del div al que nos dirigimos, y llamemos a esta aplicación Vue. Entonces podemos bajar aquí, montar Hash Vue App. Dentro de estas opciones podemos almacenar datos, así que lo hacemos lanzando un método, y luego este método devuelve un objeto, y luego este objeto podemos poner en nuestras variantes de producto. Podemos simplemente copiar estos dos objetos y tirarlos aquí. Están comentados en la actualidad, así que solo voy a eliminar esos comentarios, y ahora tenemos algunos datos sobre nuestra instancia de Vue, esta matriz de variantes de producto, que contiene la matriz de todas las diferentes variantes de producto. Después de esta matriz, lo que quiero almacenar es la variante actualmente seleccionada. Yo solo voy a hacer eso vía el estilo actual, y lo pondremos en el valor predeterminado, que es negro con raya blanca. Esos son nuestros datos, la selección actual, y luego los dos objetos que componen nuestras variantes. Esto muy bien podría ser múltiples objetos, esto es solo un ejemplo básico. Ahora, todo lo que vamos a hacer es fuera de este método de datos aquí mismo es insertar algo llamado computado. Abrir un objeto dentro de computado, y aquí es donde ponemos en propiedades calculadas. Las propiedades calculadas son propiedades reactivas, básicamente cualquier dato que utilicemos dentro de la instancia de Vue para crearlas. Si esos datos se actualizan, entonces estos campos calculados también se actualizan. Este es un lugar perfecto para poner en nuestras variantes actuales, las cuales almacenarán como método aquí. Con variantes calculadas, solo queremos devolver un solo valor. Pero un solo valor puede depender de otros datos que tengamos dentro de nuestra app Vue. Al igual que hicimos aquí abajo donde encontramos una variante en esta matriz de variantes de producto, vamos a hacer lo mismo aquí arriba, pero lo vamos a hacer de la manera ES6, así que de la manera más moderna. Lo que vamos a hacer es que vamos a ir esto, que nos dará acceso a la instancia de Vue, que luego podremos profundizar en los datos, y luego vamos a decir productvariants.find, y luego la versión corta de lo que teníamos aquí abajo, variantes donde el estilo variante es igual al estilo actual, pero tenemos que decir esto.currentstyle. Ahí vamos. Eso debería ser suficiente. Ahora que hemos establecido esas opciones, solo las dos variables aquí en nuestros datos y la propiedad calculada, ahora podemos actualizar nuestro HTML dentro de esta aplicación Vue con atributos especiales de Vue, y esto asegurará que todos los datos dentro de nuestro HTML aquí estén actualizados. Aquí, para hacer esto dinámico, voy a sustituir el src por dos puntos, y luego aquí vamos a poner en los datos de la variante actual. Voy a decir currentvariant.image. Aquí por el precio, voy a quitar eso y agregar un atributo aquí llamado v-html, y queremos fijarlo al precio de la variante actual. Ahora aquí abajo, ya no necesitamos esta clase, solo necesitamos agregar el atributo especial Vue del modelo V. Cualquier valor que establecemos aquí irá directamente a los datos almacenados en nuestra app Vue, y así vamos a obtener los datos del estilo actual para modelar la selección dentro de aquí. Voy a golpear, “Guardar” en eso. Ahora refresquemos y pasemos a nuestra página aquí, y veamos si funciona. Cambiamos, y ahora puedes ver que el precio está cambiando y la imagen está cambiando, y todo eso se hace dinámicamente. De hecho, si tienes instalado Vue DevTools, así que si voy por aquí, creo que necesito reabrir mis DevTools aquí. Puedes ver que hay una ficha para Vue. Tengo instalado Vue DevTools y puedes ver aquí representación en vivo de los datos en la computadora. Puedes ver aquí la variante actualmente seleccionada es el Número 2, que es consistente con el estilo actual de blanco con franja negra, y puedes ver aquí los datos brutos para las variantes de producto. Si me acaban de cambiar esto, se pueden ver los cambios de estilo actuales y por lo tanto con él, la variante actual. Ahora lo que estamos haciendo es agregar aquí variables para el src, para el precio, y eso es actualizarse cuando actualizamos nuestro estilo actual, que está vinculado a ahora a lo que seleccionemos aquí. Solo tenemos que hacer un poco de configuración básica aquí, y ahora obtenemos esa reactividad automática. Ahora podrías estar pensando que eso tomó tanto código como nosotros aquí abajo y tanto tiempo configurarlo. Pero cuando la aplicación se vuelve cada vez más compleja, la reactividad se vuelve aún más importante. Si tuviéramos que agregar, digamos solo una descripción en cada una de estas descripciones, y diremos que es un zapato negro con rayas blancas, y luego cambiaremos la descripción por aquí para que sea un zapato blanco con rayas negras. Ahora podemos fácilmente simplemente entrar aquí, crear un nuevo div, poner en v-HTML, y luego agarrar de la variante actual, la descripción. Tira eso aquí, ahora si nos refrescamos por aquí y cambiamos esto, estamos cambiando más datos en la pantalla. Obviamente, no está configurado a la perfección, el estilo no es increíble. Pero como puedes ver, cuando empezamos a almacenar más datos, más estado en nuestra página aquí, el componente de reactividad de Vue se vuelve muy útil. Espero que puedan ver que obviamente, cuanto más complejo se vuelve el proyecto, más se beneficia un proyecto de Vue. Pero como pueden ver, aquí es un paradigma diferente. Agregar estos valores dinámicos usando estos atributos Vue en nuestro HTML en comparación con tener que ejecutar estos oyentes de eventos, y luego actualizar manualmente el contenido usando JavaScript Vanilla, que teníamos aquí abajo. Esa es una mirada a un ejemplo de un framework front-end en forma de Vue y cómo la reactividad es útil. Nuevamente, si no quieres usarlo o no lo entiendes, no tienes que hacerlo, esta es una característica opcional, pero algo que es muy popular en el desarrollo web front-end, especialmente cuando estás empezando a construir sitios web súper interactivos y aplicaciones web. Pero claro, no es obligatorio, siempre puedes usar JavaScript Vanilla como hicimos anteriormente en este video si quieres que haga eso. Si no sientes la necesidad o no ves el beneficio de esto, entonces siéntete libre de saltarlo. Confía en mí cuando digo esto, si empiezas a meterte proyectos más complejos con mucha interactividad, empiezas a valorar algo como una Vue o una reacción cuando empiezas a meterte en esas situaciones. 10. CSS de viento colateral: En este video, vamos a hablar Tailwind CSS que es un framework CSS de código abierto. La característica principal de esta biblioteca como dice aquí es que a diferencia de otros frameworks CSS como Bootstrap, no proporciona una serie de clases predefinidas para elementos como botones y tablas. Hablamos de Bootstrap en la comprensión del desarrollo web. Era súper popular en ese entonces y sigue siendo popular, pero lo que pasa con Bootstrap es cuando lo usas en sitios web. Todos parecen tener el mismo aspecto. El viento de cola no es así en comparación. En lugar de una biblioteca de componentes, es un conjunto de utilidades, y lo que estas utilidades nos permiten hacer es escribir menos CSS y usar estas utilidades en su lugar. Conseguirás lo que quiero decir en sólo un segundo. Echemos un vistazo al sitio web y su sitio web es bastante bueno como puedes ver aquí. Se puede ver que sucede en tiempo real aquí. En lugar de escribir CSS, lo que puedes hacer es simplemente agregar clases especiales de Tailwind en el div y luego lo actualizará sobre la marcha. Aquí puedes ver que estamos actualizando los textos, estamos actualizando el layout. Todo está sucediendo sin saltar al CSS y puedes ver aquí que incluso podemos hacer media queries desde dentro del HTML también. Podemos cambiar los atributos en función del ancho de la pantalla desde dentro del HTML. Ahora personalmente, no soy un gran fan de lanzar tantas clases dentro de un solo elemento. Puedes empezar a ver que el HTML empieza a ensuciarse un poco cuando usas esto, pero lo que puedes hacer para mitigarlo contra eso es crear tus propias clases y luego aplicar esto en una clase y luego reemplazar esto aquí mismo con una sola clase. Eso es lo que te voy a mostrar también en este video. Aquí puedes ver más al respecto. Veamos de qué más están hablando. Sí, como dije, no son componentes particulares, clases de utilidad, así que puedes crear tus propios componentes aquí, pero usa estas clases de utilidad que también tienen definiciones establecidas, así verás que nos obliga a encajar a cierta Grid. Bueno, no nos obliga, sino que nos anima a ajustar a ciertos incrementos de tamaño diferentes, y eso nos ayuda a crear un diseño más consistente también. Es bueno si no entiendes el diseño, solo puedes tomar conjeturas dentro de las vistas. También viene con esquemas de color, así que creo que vi algo sobre los esquemas de color aquí abajo. Uno de ellos se llama Pizarra. Esta es en realidad una portada muy agradable. Puedes ver aquí text-slate-500, así puedes usar estos esquemas de color. Uno de ellos se llama pizarra. Puedes ver ejemplos en la portada, pero en realidad tienes que entrar en la documentación. Aquí vamos. Podemos entrar en docs, esquemas de color o Texto-Decoración Color. ¿Cómo entramos en los esquemas de color si tecleo pizarra? A veces la documentación es un poco difícil de buscar. Aquí vamos. Bajo Personalización puedes ir a Colores y puedes ver aquí tenemos estas paletas de colores aquí las cuales son agradables, así que si elegimos una paleta de colores, podemos elegir crear nuestra app en estos diferentes tonos de ese color. De todas formas, veremos todo esto en la práctica muy pronto, así que lo que tenemos que hacer es crear un proyecto Node para esto. Podemos usar una CDN, pero no es tan fácil como lo que acabamos de hacer con Vue. Viste aquí que en lugar de instalar el paquete Vue, simplemente tomamos vue almacenado en el servidor de otra persona y lo trajimos aquí. Para esto realmente vamos a traer el código Tailwind, y el beneficio de eso es que no estamos confiando en un servidor externo, especialmente cuando estamos ejecutando tantas cosas diferentes a la vez. Si agregamos hacer demasiadas solicitudes externas para agarrar bibliotecas, entonces eso va a ralentizar nuestra aplicación y podría resultar en que falle, así que lo que vamos a hacer es crear un proyecto de nodo aquí. El beneficio de convertir esto en un proyecto de nodo es que podemos comenzar a instalar módulos de nodo de los que hablamos antes cuando miramos npm y podemos comenzar a usarlos en nuestro código. Se instala con el directorio y es un sistema estandarizado para que no tengamos que hacer llamadas a código externo o el código se almacene en nuestro propio proyecto. Hagámoslo ahora mismo. Voy a abrir una terminal presionando “Shift Control Backtick”. Voy a abrir una nueva Terminal aquí y luego voy a ejecutar npm init. Antes de hacer eso, solo otra vez necesitamos verificar que tenemos npm instalado. Sí, lo hacemos. Ahora podemos hacer npm init. Esto está funcionando para que podamos escribir lo que queramos en cada una de estas opciones, pero sólo voy a presionar “Enter”. No necesitamos especificar ninguna información en particular aquí y luego lo que vamos a obtener es un archivo package.json. Por defecto, el nombre va a ser cualquiera que sea el nombre de la carpeta. La versión por defecto va a ser 1.0.0. La descripción va a estar en blanco y como puedes ver todos los demás valores predeterminados aquí. Uno de los beneficios de tener este paquete.json archivos podemos configurar nuestros propios scripts aquí los cuales harán para administrar el proceso de compilación de Tailwind, pero lo principal que hace este paquete.json es almacenar la lista de paquetes dependientes que necesitamos para poder ejecutar esta aplicación o página web en particular. Bien, así que sin más preámbulos, instalemos vientos de cola. Voy a escribir npm install. Voy a poner en la bandera D que la va a instalar como una dependencia dev y luego voy a poner en tailwindcss que es el nombre del paquete. Voy a darle a “Enter” en eso, y ahora se va a instalar, y cuando se instale hay dos cosas que van a pasar. Vamos a obtener esta nueva carpeta aquí llamada node_modules, y luego en nuestro archivo package.json aquí puedes ver que tenemos la versión de 3.2.7 de tailwindcss que probablemente sea la última versión al momento de grabar. Vamos a tener eso en nuestras devDependencies y vamos a tener todo el código que necesitamos para tailwindcss esa versión almacenado en nuestra carpeta node_modules. Esta carpeta si entramos, puedes ver toneladas y toneladas de paquetes diferentes aquí, incluyendo tailwindcss, y la razón por la que hay todos estos otros aquí es porque hay un árbol de dependencias, así que tailwindcss podría depender de otros módulos que tienen sus propias dependencias también y así todas las dependencias fluyen hacia abajo, todos los paquetes obtienen instalado en sus módulos de nodo. Si vamos al archivo package.json de tailwinds puedes ver aquí, mira todas las DevDependencies aquí, y así va a instalar todas estas DevDependencies y las DevDependencies de esas también, así que para eso es el tiempo de carga. Cada uno de estos paquetes tiene su propio package.json, y así pueden apilar uno encima del otro, y ese es esencialmente el sistema npm. Cuando publiquemos nuestro proyecto npm en la web más adelante en esta clase, te mostraré cómo hacerlo. Ignoramos esta carpeta por completo porque este documento aquí registra la DevDependencia y luego cada vez que abrimos este proyecto en una computadora nueva, aunque no tengan la carpeta node_modules pueden crearla fácilmente simplemente escribiendo npm install y se instalarán todas las DevDependencies. Hagámoslo ahora mismo. Eliminemos esta carpeta node_modules por completo, y luego simplemente ejecutaré npm install. No he quitado la devDependencia del paquete.json, así que si ejecuto npm install, simplemente volverá a instalar todos los módulos de nodo nuevamente. En realidad no necesitamos rastrear o transmitir este conjunto de carpetas a nadie. Podemos simplemente pasar el package.json y cualquiera que ejecute nuestros proyectos puede simplemente ejecutar npm install y obtener todos los mismos módulos que tenemos. Ojalá eso golpee a casa. Tiene sentido para ti. Ahora lo que voy a hacer es apagar Live Sass Compiler porque ahora vamos a estar creando nuestro css usando Tailwind. No quiero confundirte combinando a Sass e intentando integrar todo eso. Solo mantengámoslos separados, para que ya no trabajemos con este archivo scss y lo que haremos en su lugar, que podamos volver a nuestra terminal aquí. Lo que haremos en su lugar es crear un archivo input.css y un archivo output.css aquí, y luego solo necesitamos agregar este archivo output.css a nuestro índice, así que entra aquí y vamos a cambiar esto de estilos a salida, y esencialmente por qué he hecho esto es porque vamos a estar poniendo todo nuestro código de viento de cola aquí, luego ejecutando tailwind compile, va a entrar en este output.css y eso es lo que queremos incluir en nuestro documento HTML. Si voy por aquí, verás que perdemos todo nuestro estilo, pero vamos a reconstruir esto basándonos en el viento de cola, así que hagámoslo ahora mismo. La forma en que podemos compilarlo es escribiendo npx tailwind -i input.css. Los he llamado realmente simplemente para que pueda ver claramente cuál es el archivo de entrada y el archivo de salida, y luego el indicador -O para determinar la salida que simplemente se llama output.css. Si ahora ejecuto eso y luego revisamos output.css, aún no tenemos nada porque me olvidé de poner algunas directivas aquí. Voy a lanzar base de viento de cola, así que pondremos en una base estilos, componentes de viento de cola y utilidades de viento de cola, así que ahí hay algún código de viento de cola. Volvamos a ejecutar ese comando. Solo puedo presionar app y luego presionar “Enter”, y luego si miramos en output.css puedes ver ahora que tenemos todo este CSS que viene a través, así que si miramos por aquí, refrescar y una de las cosas que notarás sobre tailwindcss es que en realidad elimina prácticamente todo el estilo HTML estándar del el estilo HTML estándar que hablamos en videos anteriores. Te da una configuración realmente cruda aquí, así que incluso los botones no se parecen en nada a los botones. Lo único que los convierte en un botón es el puntero del Cursor, pero por lo demás no se ven como botones en absoluto, así que necesitamos estilizarlos nosotros mismos. Ahora como este fue un comando un poco largo, a pesar de que lo hicimos súper simple, voy a mover esto un script en nuestro package.json, así que voy a hacer este one tailwind: build. Cada vez que ejecutemos tailwind:build, va a hacer esto, pero también quiero crear otro aquí, tailwind:watch para que no tengamos que ejecutar build cada vez que hagamos esto. Lo que podemos hacer es volver a agregar en el mismo código y luego poner aquí la bandera del reloj. Ahora en nuestra terminal podemos simplemente ejecutar npm run, y luego podemos ejecutar cualquier script que configuremos aquí, así tailwind:build, lo construirá una vez o tailwind:watch con el watch flag lo construirá y luego continuará esperando cualquier otro cambio. Si tuviera que entrar aquí y darle al cuerpo un color de fondo rojo, y le pegué Guardar en eso, eso va a ser procesado y enviado al archivo de salida y como pueden ver aquí nuestro cuerpo es rojo. No tenemos que ejecutar compilar cada vez que hacemos un cambio. Cada vez que hagamos un cambio, se va a grabar y eso va a ser enviado directamente a output.css, y debido a que estamos ejecutando servidor en vivo, se actualiza automáticamente aquí. En este momento nuestra configuración está casi completa. Solo necesitamos un archivo extra en nuestra carpeta aquí. Se va a llamar tailwind.config.js y solo voy a copiar y pegar una configuración estándar aquí. Voy a presionar Guardar en esto y reiniciemos nuestro proceso por aquí. Presioné Control X para apagarlo. Reiniciémoslo solo para asegurarnos de que está usando el archivo de configuración correcto. Cambiar a aquí y ahora deberíamos poder usar las utilidades en nuestro HTML. Empecemos a reconstruir nuestra página con viento de cola. Aquí dentro del contenedor de página, solíamos usar estas clases y luego entrar en nuestro archivo css. Todavía podemos hacer eso, podemos entrar aquí contenedor de página y podemos reconstruir esta clase con clases de viento de cola, así podemos ir a aplicar y luego puedo agregar en diferentes clases de viento de cola, y puedes ver aquí lo que hacen estas diferentes clases, pero por ahora no hagamos eso. Pongamos esto en línea y luego lo trasladaré a clases un poco más tarde. Vamos al índice aquí, y lo que tenemos que hacer es que tenemos que recuperar esa cuadrícula de visualización. Podemos simplemente escribir en grid y como puedes ver aquí, se auto-completa grid, display grid y luego podemos darle un gap de 0.5 rem que se aproxima a 12 pixeles. Eso es dentro de un gap-3. Puedes ver aquí, si reescribo esto, puedes ver viento de cola nos anima a usar ciertos incrementos, así de cero a cuarto rem, a medio rem, tres cuartos rem, uno rem y luego simplemente sube en esos incrementos y se puede ver en el comentario junto a él, cuántos píxeles equivale aproximadamente a, entonces es bueno. Reduce las opciones aquí lo que me facilita, un desarrollador web front-end averiguar qué poner aquí. Ahora podemos dar esa grilla aquí y luego como puedes ver aquí, display grid, la brecha debería guardarse en alguna parte, tal vez necesitamos refrescarnos por aquí. Sí, así que ahora necesitamos refrescarnos desafortunadamente. No estoy seguro de por qué. Veamos que nuestro servidor en vivo se está ejecutando. Sí, lo es. Eso es interesante. Solo necesitaba que me refrescara y luego obviamente necesitamos volver a configurar nuestras columnas de plantilla, y desafortunadamente para nosotros en nuestra instancia específica donde si vamos a nuestros estilos aquí, esto es un poco demasiado específico para una clase estándar de viento de cola, así que lo que tenemos que hacer es usar un hack dentro de tailwind que nos permita establecer un valor arbitrario. Para ello, lo que vamos a hacer es grid-cols y el hack es abrir corchetes, y de aquí la primera llamada se fijará en minmax auto 150? Podemos establecer eso aquí, auto, 150px y luego podemos crear un guión bajo aquí para la segunda columna que si volvemos a estilos era 3fr. Pongo un espacio aquí. A ver, ahí vamos. Ahora puedes ver que tenemos ese mismo estilo viniendo a través, pero es en la forma de una clase de viento de cola. Después bajamos a cabecera aquí y voy a poner el col-start a 1, col-end a 3. Entonces aquí es donde podemos empezar a usar pizarra el esquema de color del que hablé antes, en lugar de los colores aleatorios que establecemos que lo que fuera primero en la lista. Aquí voy a usar el tono cientos de pizarra y luego pondremos el color de fondo a eso. Guarde eso, actualice por aquí, y luego podrá ver ahora el encabezado tiene un color de fondo y está extendiendo todo el ancho de la página a través de ambas columnas, así que eso es lo que queremos. Después de encabezado-menú aquí, voy a poner en flex para display flex list-none para list style type none. Pondré p-0 para relleno cero tanto en el eje vertical como en el horizontal. Justify-center para establecer justify content to center, gap-3 para establecer el gap grid tres cuartos rem y solo para que sepan chicos todas estas clases están listadas en la documentación. La documentación sobre tailwindcss es bastante buena. Te animo a que lo revises. No espero que recuerdes todos estos y de hecho los tengo anotados, así que sé exactamente cuáles poner aquí. Pero para ustedes diríjase a tailwindcss.com, diríjase a los docs y comiencen a leer más al respecto. Podemos entrar en mientras personaliza colores y puedes ver aquí los diferentes esquemas de color, el código de color exacto para pizarra 50, pizarra 100, pizarra 700, etc. y un montón de otra información. Hace falta un poco de curva de aprendizaje para averiguar qué es la clase, pero claro que después de suficiente práctica empiezas a conocer estas cosas más fácilmente, así que continuemos aquí. Ahora vamos a la barra lateral, y para la barra lateral voy a hacer bg-slate-200, así que un tono un poco más oscuro para el menú de la barra lateral. Voy a hacer pl-3 que es el relleno que queda. Lo va a establecer en 0.75 rem, luego voy a establecer mis atributos flex, así que voy a establecer grow para establecer flex grow a uno. Voy a poner encoger-0 para establecer flex shrink a cero, y luego basis-24 que es aproximadamente 100, 96, y entonces ese debería ser todo. Guarde eso, refréscate por aquí, luciendo muy bien. El botón ahora ha perdido su estilo por completo. Vamos a entrar aquí y darle un montón de nuevo estilo px-3 que le dará relleno a izquierda y derecha, así que básicamente relleno en el eje x, luego le daremos relleno en el eje vertical, así relleno superior e inferior de dos. Un poco menos redondeado para dar un radio de borde al botón pg-pizarra. Volveremos a usar la paleta de colores de pizarra y usaremos un tono más oscuro de 600. También usaremos pizarra para el color del texto. Solo hay que asegurarse de que aquí hay suficiente contraste, así que voy a establecerlo en 50, un tono mucho más claro y luego m-1 que establece el margen en cuatro píxeles o 0.25 rem. Golpeé Guardar en eso. Veamos por aquí, y ahora tenemos el estilo para el botón. Ahora aquí arriba tenemos esta brecha de columna. No queremos eso, así que volvamos aquí. Gap-3 queremos que sea solo columna, así que hay col-gap-1. A veces en lugar de revisar la documentación, puedes tener una suposición, así que tal vez podamos hacer gap-x. Ahí vamos. Brecha de columna, ¿qué eran tres? Ahí vamos y luego ya no tenemos ese hueco entre filas, solo entre columnas. Ahora vamos al menú de la barra lateral. Listas-none para el estilo list none, p-0 para no padding y luego queremos extender todo el ancho, así haremos alturas. Veamos cuáles son las opciones. Podemos desplazarnos por todos estos, ver si aquí hay una opción para 100%, h-4. Vamos a probar eso. Guardar, refrescar por aquí. Ahora a alturas 100% cool y como puedes ver aquí, en realidad no tenemos que actualizar los estilos de link porque ya están despojados del viento de cola. Si quisiéramos traer de vuelta ese estado estacionario, realidad podemos hacer eso en vientos de cola haciendo esta clase y luego podemos poner la pseudo-clase aquí hover:subyacente debería darnos la decoración del texto, pero presioné Guardar en eso. Vamos a echar un vistazo, refrescar. Ahí tienes, así que está funcionando. Sólo tenemos que copiar eso para todos los demás aquí, ahí vamos. Entonces aquí arriba también voy a crear ese hover:state. Guarde eso. Ahora puedes ver el hover:state sucediendo aquí. No necesitamos crear una clase separada para eso. Literalmente podemos simplemente poner eso en el elemento en sí, así que cosas así realmente lo agradezco. Eso es genial, y solo por el bien del tiempo, voy a quitar esta vista aquí arriba, no vamos a estar haciendo más vista en esta clase. Voy a mantener esta sección con la clase de main. Deshazte de todo este código de vista aquí mismo. Volver a lo que hacíamos antes. No creas que necesitamos poner ningún estilo especial en main, pero para cajón lo que tenemos que hacer es que le voy a dar un fondo de 200 pizarra. Queremos que sea la altura completa de la pantalla con pantalla H. La posición tiene que ser absoluta y solo puedo hacerlo escribiendo un top-0 absoluto establecerá los dos píxeles cero superiores. Ancho, quiero que sea la mitad del ancho de la ventana gráfica. Eso es un valor arbitrario. No creo que el viento de cola tenga una opción para eso, así que voy a abrir corchetes aquí, 50 ancho de ventana gráfica, luego voy a hacer derecho-0 para establecer el atributo correcto a cero píxeles y luego voy a hacerlo más fácil para mí y solo poner transición todo. Como puedes ver aquí, establecerá múltiples parámetros aquí, pero esencialmente eso creará la transición. Si vimos antes en styles.css, especificamos la transición para que solo se aplique al atributo correcto, pero con la misma facilidad podemos ponerlo a todos, y luego los cubrirán todos lo cual creo que tiene sentido y luego tenemos nuestro botón aquí el cual podemos simplemente copiar las mismas clases que tenemos para el otro botón. Ahí vamos. Pon eso aquí abajo, arregla el espaciado. Entonces si presiono Guardar en eso, vamos a refrescarnos por aquí. El dibujo se muestra por defecto, si abro esto y le echo un vistazo a esto. Se puede ver que el cajón está configurado actualmente en cero derecho. Tenemos que darle un conjunto diferente de estilismo si aria-hidden es cierto. Por suerte para nosotros en Tailwind, esta es una característica donde solo puedes ir a dos puntos aria-hidden y podemos establecer una clase para que solo se aplique si aria-hidden es true. Entonces puedo usar un valor negativo aquí a la derecha para establecer a la derecha, creo que está lleno al 100%. Si me desplazo hacia abajo aquí se puede ver a la derecha completa. Refresca por aquí, el cajón no se abrirá por defecto. Ahí está y puedo abrirla y cerrarla aquí. En realidad, esto necesita extender toda la altura. A lo mejor necesitamos establecer la altura de la rejilla al 100%. Olvidamos establecer la altura de la rejilla al 100%. Voy a entrar aquí, solo hazlo fuera de la parrilla y luego haremos h4, creo para el 100%. Echemos un vistazo. Altura, 100%. Entonces nos olvidamos de poner en nuestro estilo para el tamaño de fila. Nuestras filas de plantilla de cuadrícula fueron de 50 píxeles, 1fr. Ese probablemente va a ser un poco complicado. Filas de cuadrícula y luego vamos a poner aquí un valor arbitrario, 50 píxeles, 1fr. A ver si eso funciona. Refresca por aquí y he aquí y he aquí que sí. Ahí tienes, 50 pixeles, 1fr que es lo que teníamos aquí. Ahora tenemos nuestra barra lateral de encabezado. Nuestro cajón está funcionando y todo ha sido recreado en Tailwind. Yo solo quiero poner algo de contenido en principal aquí, contenido principal para que podamos poner lo que queramos aquí. Tenemos el contenido principal aquí y es posible que también queramos poner algo de relleno allí. A lo mejor este será un contenido principal h1, pero nuevamente, tiras de viento de cola o estos CSS estándar. sólo darle el elemento de h1, no significa necesariamente que esto va a ser más grande. Lo que tenemos que hacer es especificar nuestras clases aquí. Podemos hacer texto 5xl y fuente negrita para hacerlo más grande y audaz y ahora puedes ver que aquí tenemos un título más grande. Sin embargo, no viene con ningún margen, tenemos que especificarlo nosotros mismos. Aquí vamos. Solo hagamos my-2 para darle un poco de acolchado superior e inferior y eso debería hacernos por ahora. Todo funciona ahí y hemos recreado nuestro diseño usando Tailwind CSS. Ahora hay un gran problema aquí para mí, no lo sé, algunos algunos así, pero aquí tenemos atributos ridículamente largos para las clases. Tengo que desplazarme al otro lado de la página veces solo para verlas, prefiero escribir nombres descriptivos en clases en lugar de solo clases de utilidad. Por un tiempo ahí, no quería usar Tailwind por esto. Estaba como que esto es demasiado desordenado. Me gusta escribir clases descriptivas agradables como contenedor de páginas, menú de encabezado como lo hemos hecho en el pasado. Pero en realidad hay una manera de sacar lo mejor de ambos mundos y te lo mostraré ahora mismo. Si entramos en nuestras entradas CSS, realmente podemos reconstruir nuestra clase de contenedor de páginas con todas las utilidades que simplemente nos sentamos en ella con Tailwind. Lo que voy a hacer es agarrar todas las clases que establecemos después de contenedor de página. No voy a eliminar contenedor de páginas. Voy a guardar eso y voy a venir aquí y sólo puedo escribir Aplicar y luego poner todas las clases de Tailwind después de eso. Entonces aplicará todos estos a la clase de contenedor de página. Si actualizamos por aquí, verás exactamente el mismo resultado pero ahora no tenemos todo ese lío en nuestro HTML. Aquí se puede ver que todos esos atributos han sido empaquetados juntos y puestos en esa clase, que creo que es mucho más limpia. Pasemos ahora y hagamos eso por todo lo demás. Para nuestro encabezado aquí, voy a agarrar ese contenido y vamos a hacer encabezado, aplicar, agregar eso en. Ahí vas. Después entraremos en el menú de cabecera. Coge todos estos menú de encabezado, derecho, aplica. El mismo proceso todo el camino a través. Solo estoy tomando esas clases de utilidad y aplicándolas a la barra lateral de clases. Súper fácil con la directiva aplicada aquí. Vayamos más abajo en las listas, botones. Podemos apuntar a todos los botones, así no tenemos que seguir repitiéndonos aquí para todos los botones. En lugar de apuntar a un objetivo de clase o botones, pon aplicar delante de esto. Ahí vamos. Entonces puedo quitar estas clases de ese botón. A ver si hay alguna rotura tan alejada de, sólo tengo que asegurarme de que ese es el botón. Sin roturas, así que ya tenemos nuestros botones cruzando. Podemos agarrar esto, ponerlo en barra lateral-menú, aplicar. Entonces esta es una buena aquí también porque esto nos está repitiendo una y otra vez. No queremos a eso. En cambio, lo que haremos es, tomemos todas nuestras etiquetas a dentro de una lista desordenada, y luego aplicaremos el subrayado estacionario. Ahora ya podemos eliminar todos estos. Usaré el Comando D en una Mac para seleccionarlos todos y simplemente puedo eliminarlos todos al mismo tiempo. Entonces podemos entrar aquí por nuestro h1. Usemos estas clases en todos los h1. Entra aquí, h1, aplica. Vamos a entrar aquí, para el final, para el cajón y luego voy a ir a crear la clase para cajón, usar aplicar y ahora refrescante por aquí obtenemos exactamente el mismo resultado. Pero ahora puedes ver que nuestro HTML es mucho más limpio, que es como me gusta. Aquí puedes ver que todo se llama muy bien. No estamos tratando de descifrar todas estas clases de CSS Tailwind que de otra manera tendrían. Si miras por aquí, ahora, todo eso solo contiene el CSS de entrada y creo que es mucho más agradable tenerlo aquí que tenerlo en el HTML real. Esa es mi preferencia. Solo empecé a meterme en Tailwind una vez que me di cuenta de que podías hacer esto, aún podrías usar clases. Aún puedes apuntar a elementos, pero luego podrías usar clases Tailwind también. Algunas de las cosas que me gustan que tienes estas pseudo-clases. Lo tienes aquí de nuevo para subrayar el vuelo estacionario y lo loco es que en realidad también puedes hacer consultas de medios aquí dentro. Qué tenemos en nuestro styles.css aquí, no habíamos mostrado la barra lateral en el móvil en Tailwind, es un sistema móvil primero. Todas las media queries van a ser min-width, lo que es móvil por defecto y luego usamos las media queries para afectar tamaños de pantalla por encima de ciertos niveles. Te voy a mostrar lo que quiero decir con eso ahora mismo. Si solo vamos a la documentación de Tailwind CSS y busco diseño responsive y miro esta página, puedes ver los prefijos de punto de interrupción. Debería decir aquí que Tailwind CSS es móvil primero. Es usar un sistema de punto de interrupción móvil primero, que no es mi preferencia. Prefiero usar primero un escritorio. Pero sí mencioné que muchos sistemas modernos son móviles primero. Como puedes ver aquí, si usamos el pequeño break, va a afectar a todo lo que esté por encima de 640. Entonces estos puntos de interrupción van hasta 1536. Usando esto, vamos a entrar aquí. En primer lugar, queremos hacer por defecto, porque el predeterminado es móvil, queremos que esto no muestre ninguno, así que solo configuramos hidden. Pero luego por encima de lo pequeño, no queremos que se oculte, así que pondremos en bloque, que lo configurará para mostrar bloque. No es exactamente lo mismo que aquí porque es 640 y no 425, pero está lo suficientemente cerca. Si vamos por aquí y voy al iPhone 12 pro, se puede ver sin ninguna media queries, nos deshicimos de la barra lateral. De forma predeterminada, debido a que estamos en el móvil primero, la pantalla está establecida en none. Déjame volver a esta manera. Cuando vayamos por encima de 640, ya pueden ver, así que voy a mover esto de nuevo. Estamos movidos por encima de 640. Puedes ver esta media query de Tailwind sale pero en realidad no tenemos que escribir eso nosotros mismos, todo lo que tenemos que escribir en Tailwind es la clase que queremos aplicar después de este punto de interrupción. Me encanta cómo en Tailwind si lo instalamos correctamente, podemos ver aquí el código exacto que está poniendo a través de nuestro CSS. Por eso es importante seguir ejecutándose, compilando aquí porque cada vez que creamos esto, creará el CSS sin procesar necesario en nuestro archivo de salida y hace todas estas locuras para asegurarse de que sea óptimo y solo usando lo que necesita. Es bastante increíble una vez que entiendes el poder de Tailwind. Pero nuevamente, es una herramienta como cualquiera de estas otras herramientas. Todo se reduce a HTML, CSS y JavaScript. Nuevamente, si no quieres usar esto, es completamente opcional. Solo te estoy mostrando una de las herramientas populares que los desarrolladores web front-end están usando en estos días. Si esto es algo que te interesa, definitivamente profundiza más y aprende más sobre Tailwinds. Incluso puedo crear una clase sobre Tailwind para ustedes si están interesados en aprender más, pero todo está documentado en la referencia aquí. No necesariamente necesitas un curso si puedes leer toda esta documentación, estoy emocionado de seguir usando Tailwind y probarlo en algunos proyectos más grandes. A mí personalmente me gusta. Nuevamente, si no te sientes libre, puedes saltarte este video. Puedes saltarte su uso. No es una parte esencial del desarrollo web front-end, solo otra herramienta. Pero con eso fuera del camino, hablemos de algo que podría ser esencial para tu proyecto de desarrollo web y que es recopilar datos de una API externa. Lo cubriremos en el siguiente video. 11. Usando las APIs: En este video, vamos a ver APIs. Específicamente, vamos a ver ejemplo de una API para traer algunos datos falsos de tiendas a nuestra pequeña aplicación aquí. Recuerda que antes teníamos esa página de Producto como ejemplo. Trabajo principalmente en comercio electrónico, así que me gusta usar estos ejemplos de tiendas de comercio electrónico. En este video, lo que vamos a hacer es que vamos a traer datos de una API de tienda falsa. Nos da una tienda falsa de datos. Entonces podemos crear una lista de productos en el front-end con estos datos que provienen de una API. ¿Qué es una API? Simplemente significa interfaz de programación de aplicaciones. Si buscas la definición en línea, puede ser un poco confuso en cuanto a lo que realmente hace porque puede significar un montón de cosas diferentes. Esencialmente, en este contexto, una API es solo una forma de conectarnos a un back-end para recuperar datos. En mi primera clase, Comprender el desarrollo web, adoptamos un enfoque menos moderno escribiendo PHP, tratando con nuestra propia base de datos MySQL y emitiendo ese contenido a la pantalla a través de PHP. Pero ahora, a medida que el front-end se ha vuelto más complejo con los frameworks front-end y tales como, ahora es un patrón más común tener una API separada y una aplicación front-end separada, y conectar las dos. La API es básicamente la app back-end, que nos da los datos. puede pensar en las APIs en esta instancia como simplemente una fuente de datos a la que podemos conectarnos. Para poder acceder a estos datos, todo lo que necesitamos es un punto final API, que es solo una dirección que cuando le hagamos una solicitud, devolverá datos. Al igual que hemos hecho una solicitud a este servidor aquí mismo y se le devuelve el contenido de nuestra página, podemos hacer una solicitud a un servidor y recuperar algunos datos sin procesar. Eso es lo que haremos en este video. Voy a compartir con ustedes un ejemplo sencillo en esta lección. Vamos a abrir fakeapi.platzi.com. Esta es la API de Platzi Fake Store. Como dice aquí, es una API de descanso para tu prototipo de sitio web de comercio electrónico o compras. Vamos a usar esto para generar una lista de productos y mostrarlos en nuestra pequeña aplicación web. Aquí notarás que la API es una API de resto. Esta es la forma de API más simple de entender. Hay otro estilo de API que es más moderno llamado GraphQL, pero que requiere una comprensión del lenguaje de consulta de GraphQL. Con las APIs de descanso, todo lo que tenemos que hacer es llegar un determinado punto final, que está justo aquí. Sólo tenemos que darle a esta dirección y luego nos devolverá datos. Si solo copio eso y abro otra pestaña y la pego , verás que obtenemos una lista completa de datos. Antes veías que venía como texto sin formato sin formato, y entonces ahora está haciendo esto. Esto se debe a que tengo una extensión de Chrome en mi navegador Chrome aquí que hace esto. Se puede ver los datos en formato JSON saliendo bastante bien. Pero si no tienes esa extensión, verás saliendo como el formato raw ahí. Podemos simplemente ponerlo directamente en nuestra barra de direcciones así. Eso podría ser útil para ver los datos, al menos la estructura que viene a través de la API. Pero lo que vamos a hacer en nuestra aplicación web es usar este punto final para insertar estos datos en nuestro front-end y luego podemos interactuar con él. Lo que voy a hacer es obviamente que tenemos una lista de productos aquí, voy a construir una pequeña página de colección en nuestra aplicación web usando Vue y usando esta API. Voy a mantener esto en mi portapapeles, dirígete aquí, luego cambiemos a nuestro editor de código. Estábamos hablando de Tailwind en un video anterior. Déjame cerrar eso. Déjame convertir esto en Vue otra vez. Lo que voy a hacer es darle a esto una identificación de Vue App para que podamos vincular nuestro código Vue a eso. También voy a necesitar traer de vuelta la referencia a Vue a través de la CDN. Yo sólo voy a tirar eso. Hagámoslo aquí mismo. Scripts SRC, luego la dirección a la última versión de desarrollo, que es unpckg.com/vue @next. He escrito mal esto. He dicho guiones en vez de guiones. Entonces insertaré otro aquí, y simplemente insertaremos nuestro código Vue aquí mismo. Nuevamente, simplemente voy a crear mi objeto de opciones, conseguir que el andamio vaya aquí. Después crearemos la app Vue. Crear app, cargando en las opciones, y luego montándola a ese div, que le dimos el ID de Vue App. Podemos ir aquí, Hash Vue App. Si pulsamos “Guardar” en eso, refrescar por aquí, deberíamos ver que estamos ejecutando una versión de desarrollo de Vue. Si tienes instalado el DevTools for Vue, si cierro esto y lo vuelvo a abrir, podremos obtener el Vue DevTools por aquí. Recomiendo encarecidamente esto. Para instalar el Vue DevTools, puedes ir a Chrome Extension Store y escribir Vue DevTools. Por alguna razón está tardando mucho en cargarse. Yo sólo voy a escribir en Vue. Aquí puedes ver el que estoy usando es este de aquí, Vue.js devtools by Developer Tools. De vuelta a aquí, puedes ver que estamos ejecutando una app en esta sección aquí, puedes ver resaltada. Lo que voy a hacer es que voy a escribir algún código que quiero ejecutar cuando esta app esté montada. Podemos hacerlo a través del método del ciclo de vida montado. Si acabo de crear un método llamado montado y lo pongo dentro del objeto options, cualquier cosa que escriba dentro aquí será de salida a la pantalla. Volvamos y copiemos esa dirección API. Asegúrate de que esté en nuestro portapapeles. Entonces lo que voy a hacer es escribir un simple fetch. Este método de aquí mismo es súper simple, pero súper poderoso. Todo lo que hace es ejecutar una solicitud get a cualquier dirección que se encuentre en este primer argumento. Entonces encadenaremos un.then. En esto.entonces voy a meter este código, que simplemente procesa el JSON y nos permite convertirlo en un objeto JavaScript para usarlo en nuestra app. Entonces con ese JSON devuelto, para empezar, solo voy a registrarlo en consola para que cuando se cargue nuestra app, obtengamos los datos en nuestra consola y luego podamos ver cómo se ve. Aquí puedes ver. Voy a refrescarme otra vez. Se puede ver que tenemos 177 objetos en una matriz. Podemos mirar e inspeccionar dentro de la matriz y podemos ver todos los diferentes datos de productos que vimos antes simplemente escribiendo en nuestro navegador. Ahora tenemos esto en forma de JavaScript, podemos cargarlo en nuestra app Vue. Voy a dar click aquí. Voy a añadir algunos datos. Siguiendo este formato, vamos a devolver un objeto. No lo olvides, tenemos que poner nuestra coma aquí y voy a poner en una matriz llamada products, que al principio va a ser una matriz vacía. Entonces por aquí, lo que voy a hacer es porque el objeto JSON que está regresando es una matriz. Si miramos hacia atrás a aquí, podemos simplemente insertar esta matriz en esta matriz dentro de nuestra aplicación. Solo tenemos que empezar haciendo referencia a esta, que es la app que estamos viendo actualmente, así es como tomamos los datos, y luego solo vamos a asignar ese JSON devuelto a esto.productos, no producto ahí vamos. Si pulso “Guardar” en esto y refrescar por aquí, verás que no hay nada en la consola porque hemos eliminado ese registro de la consola, pero si tuviéramos que verlo en nuestras DevTools, puedes ver que esa matriz de objetos ya se ha cargado aquí. Ahora, podemos interactuar con esto en nuestra app Vue. Voy a ir por aquí y vamos a utilizar estos datos. Voy a escribir aquí colección de productos, lo que queramos. En realidad, solo voy a saltarme el encabezado por completo y voy a crear un div aquí con la clase de colección, y dentro de aquí, comenzaré un bucle for con Vue. Voy a crear una tarjeta de producto. Esto será un div para cada producto que llegue, y quiero que esto funcione para tantos productos como haya en la matriz. Podemos usar un bucle v-for aquí, y luego solo puedo escribir producto en productos. Podemos llamar a esto como queramos, solo va a sacar un elemento individual de esta matriz que coincide aquí abajo. Voy a dar click para salir de eso. Entonces dentro de aquí, queremos una etiqueta de imagen, déjame llamarlo product-image, y luego el src, vamos a sacar del objeto producto devuelto. Si miramos hacia atrás aquí, adentramos en uno de estos objetos, se puede ver que se devuelven tres imágenes, así obtenemos una matriz de imágenes. Tenemos que hacer una elección aquí. Simplemente escojamos el primero de la matriz, que va a estar en la Posición 0. Entonces solo iremos a product.images, y para seleccionar el primero de la matriz en la Posición 0, simplemente escribimos cero ahí. Entonces aquí, pongamos en el título del producto. Entonces voy a usar v-html para insertar algún HTML interno basado en una variable. Voy a ir con product.title. Si volvemos al objeto, se puede ver que obtenemos un valor para el título que viene aquí, y luego voy a presionar “Guardar” en eso. Vamos a refrescarnos por aquí. Como puedes ver, a medida que cargamos la página, luego estamos haciendo una solicitud a esa API externa y estamos trayendo las imágenes y el texto. Déjame refrescarme otra vez. Va a estar funcionando bastante rápido porque es una app bastante básica, pero como puedes ver aquí, la página se carga primero. Tenemos el encabezado y la barra lateral que carga primero, luego puedes ver los nombres que vienen, luego puedes ver las imágenes. Lo que está sucediendo es que, si miramos de cerca, en realidad está sucediendo demasiado rápido para incluso la aplicación Vue la detecte, pero inicialmente, esta matriz de productos está vacía, y luego una vez finalizada la solicitud de API, se está llenando con los 177 productos diferentes. Si voy por aquí, podemos ver el objeto products está inicialmente vacío y luego no es hasta que esto haya corrido que esos productos entran en la matriz de productos. Una cosa que quiero hacer antes ejecutar esto es solo asegurarme de que la matriz de productos no esté vacía antes de comenzar a intentar generar todo esto. Lo que quiero hacer para que esto sea un poco más agradable es cuando me refresque por aquí, se puede ver que hay un periodo en el que está en blanco. Quiero poner un poco de indicador de carga ahí, así que lo que voy a hacer es tener en cuenta que Vue es reactivo, y si los datos cambian, la página va a cambiar, podemos poner aquí una simple sentencia if para comprobar la longitud de la matriz. Como puedes ver aquí, he puesto una etiqueta de plantilla aquí. Esta es una etiqueta especial de Vue en la que podemos poner lógica, pero que en realidad no se renderizará en la página. Voy a poner en una sentencia if aquí y vamos a ir si products.length es mayor que cero, es decir, no está vacío, entonces vamos a ejecutar esto, pero si está vacío, entonces la alternativa de eso, sólo voy a poner en un v-else. Si está vacío, que es lo que va a ser al cargar la página, solo voy a poner aquí un indicador de carga súper básico, cargando... Ahora bien, si actualizamos, puedes ver que por una fracción de segundo ahí dice cargando antes de que traiga todos los datos del producto. La otra cosa que quiero hacer la limpieza esto obviamente, tenemos 177 productos llegando, es un poco demasiado. Voy a limitar esa cantidad. Lo que puedo hacer es mover este v-for aquí arriba, y luego puedo agarrar el índice así como el objeto real en este bucle, y entonces lo que puedo hacer aquí es solo mostrar una ficha de producto si el índice es digamos menos de cuatro. Ahora sólo van a aparecer los primeros cuatro artículos. Golpeé “Guardar” en eso, refrescar por aquí, y verás que tenemos los primeros cuatro elementos apareciendo. Idealmente, queremos reducir el tiempo de carga restringiendo la API para que solo nos envíe la cantidad que necesitamos. Este 177 es exagerado. Sigue funcionando súper rápido, pero si repasamos nuestra documentación aquí, tal vez haya una manera de limitar, entonces los productos. Aquí vamos. Consigue un solo producto, crea un producto. Esto es lo que se llama una especificación API. Podemos pasar por aquí para aprender a usar la API. Podemos tener una paginación mirada. Aquí vamos. Podemos poner un límite. Hagámoslo. Bajaremos hasta aquí, y luego al final, ¿ vamos a poner? límit=4. Podríamos poner el límite a nivel API. Refrescante. Sigue recibiendo 177. Echemos un vistazo. A lo mejor también tenemos que poner el offset, así que sí offset a cero y limitar a 10. Podemos separar estos parámetros con el símbolo ampersand. Voy a actualizar nuestra aplicación web por aquí. Como puedes ver, ahora solo estamos recuperando cuatro de la API, lo cual es más agradable porque no estamos haciendo una solicitud que sea más larga de lo necesario. Con esto en mente, incluso podemos simplemente eliminar esta declaración if y aún así obtendremos la misma espalda, pero podemos poner el límite en el front end y en el backend. Quiero que esto aparezca un poco más estilizado, así que voy a copiar y pegar algunos CSS. este momento todavía deberíamos estar usando Tailwind, así que lo pondré en mi archivo de entrada aquí, pulsamos “Guardar” en eso. Refresca por aquí, y puedes ver ahora que aparece en más de un formato de cuadrícula. Bien, entonces ahora si sigo refrescando y dices cargando, y luego obtenemos nuevos datos cada vez de la API, y obtenemos nuestras bonitas cuatro tarjetas. Pero en realidad construyamos sobre esto e incorporemos algo de interactividad. Si realmente miramos cada uno de estos objetos, puedes ver que cada uno de ellos tiene un ID. Podemos usar eso para identificar a cada uno de ellos. Lo que voy a hacer es que voy a construir otra sección aquí para que podamos dar click en una de estas y profundizar en sus datos. Voy a volver a nuestra aplicación aquí, y en mis datos bajo Productos, voy a poner en un nuevo campo para el ID del producto seleccionado. Entonces pongamos eso en nulo para empezar. Entonces lo que voy a hacer de manera similar a como lo hicimos con la varianza, voy a crear un campo calculado y ese solo será producto seleccionado, que todo lo que hará es simplemente determinar el objeto de producto seleccionado a través del ID de producto seleccionado. Mirará a través de los objetos de los productos, buscará el ID del producto seleccionado y luego devolverá ese objeto. Voy a devolver esto.productos usando el método find nuevamente aquí, vamos a buscar el producto donde el ID del producto coincida con el ID del producto seleccionado en nuestros datos. Entonces necesitamos un método ahora para establecer el ID del producto seleccionado. Voy a entrar aquí y crear un objeto de método. Dentro de aquí, podemos crear un método llamado set selected product, y solo tomaremos el argumento de ID. Este será un método muy sencillo. Todo esto hará es tomar el ID que se ha pasado y asignarlo a esto.ID de producto seleccionado. Muy sencillo. Ahora para seleccionar el producto, voy a poner un oyente de eventos en cada una de estas tarjetas de producto. La forma en que lo hacemos en Vue es súper fácil. Todo lo que tenemos que hacer es poner un atributo aquí. Se iniciará con el símbolo at, y el atributo va a ser el nombre del evento. Va a ser un simple evento click. Entonces así que básicamente estamos diciendo onclick el método que queremos ejecutar es establecer productos seleccionados. Entonces por supuesto tenemos que enviar a través del ID que queremos establecer ese producto. Voy a ampliar esto aquí. Esa será simplemente la identificación del producto que actualmente estamos recorriendo. Si le pego a “Guardar” en eso, todavía necesitamos construir esta sección aquí, pero vamos a comprobar que todo está funcionando en la Vue DevTool hasta el momento. Verás cuando carguemos el proyecto por primera vez, tenemos el ID de producto seleccionado de null, y por lo tanto tenemos un valor indefinido para producto seleccionado dentro de computado. Pero si tuviera que hacer clic en uno de estos, no parece que esté funcionando. Déjame refrescarme aquí. Puedes ver por alguna razón que no es refrescante en la aplicación real aquí. Pero si tuviera que hacer click en el tomate de sopa, refrescar por aquí, se puede ver el ID del producto seleccionado es 38. Debido a que tenemos un objeto en nuestra matriz con ese ID, por supuesto que lo hacemos porque usamos esto como las posibles opciones para el ID del producto seleccionado, luego podemos calcular el objeto para el producto seleccionado. Si hago clic en este y actualizo, ahora tenemos el ID de producto seleccionado de 41, y por lo tanto estamos recuperando el objeto de producto seleccionado. Ahora con eso en mente, todo lo que tenemos que hacer es construir otra sección aquí basada en el producto seleccionado. Después de esta colección div aquí, asegurándose de mantener esto en la aplicación Vue. De lo contrario, no va a funcionar. Vamos a crear un div aquí, y vamos a hacer una V if. No queremos mostrar esto a menos que el producto seleccionado tenga datos dentro de él. Si es solo un objeto vacío o nulo, este volverá es falso, por lo que no aparecerá. Entonces le daremos a esto una clase de producto. Qué necesitamos aquí dentro, vamos a tener la imagen y vamos a tener la información del producto. Voy a comenzar con la imagen aquí y cargarla en el SRC dinámicamente, que solo se seleccionará product.images porque recuerden, cada una de ellas tiene múltiples imágenes. Simplemente tomaremos la primera imagen de la matriz, luego crearé otro div aquí llamado product info para el resto de la información. Eso va a estar formateado en el lado derecho. Entonces voy a lanzar h1, estamos usando Tailwind still, así que podemos escribir algunas clases de utilidad de viento de cola aquí, texto 5xl, fuente, negrita, y margin-bottom de aproximadamente ocho píxeles, y luego configuraremos esto para que sea el título, producto seleccionado.título. Entonces bajaremos y fijaremos el precio aquí, precio, que solo será un div. Luego dentro de V, HTML, que establecerá el HTML interno basado en una variable, luego pondremos el producto seleccionado.precio. Entonces por último, la descripción del producto, que solo voy a poner div cuando pongas una clase para éste. Pero configuraré el HTML interno a la descripción del producto seleccionado, que creo que debería coincidir con la API. Echemos un vistazo. Solo seleccionemos uno aquí. Refrescar y descripción. Sí, tiene una descripción. Bien, genial. Voy a copiar una vez más a través de los mismos algunos para que no nos empantanemos en eso. Entonces de vuelta aquí, veamos si esto está funcionando. Si hago clic en estos, no pasa nada. Si arrastro esto y entro a la consola, puedes ver que tenemos algunos errores, “No se pueden leer propiedades de imágenes indefinidas de lectura”. Es importante si te encuentras errores que leas los mensajes de error. Estamos tratando de leer imágenes sobre algo que no está definido. Obviamente he cometido un poco de error aquí. Déjame ver el código. Si me desplazo hacia abajo, pueden ver que he escrito mal esto. He puesto select product.images, se suponía que debía escribir selected. Eso es sólo un error tipográfico de mi parte. Ahora si hago clic en esto, verás que no hay ningún error, y verás que ahora puedo actualizar el producto seleccionado y eso actualizará esta sección aquí abajo. Ahora el precio no tiene el símbolo de moneda en él, así que lo arreglaré rápidamente. Voy a ir por aquí. Lo que podemos hacer es que en realidad puedo poner comillas simples aquí para ponerlas en una cadena simple, y luego solo pondré plus después de eso para poder combinar las dos y voy a presionar “Guardar”. Ahora cuando haga clic en estos, van a tener un signo de dólar frente a ellos. Podemos traer datos de una API externa, y luego una vez que están dentro de nuestra aplicación, tenemos reactividad desde un framework front-end como una vista para poder interactuar con esos datos. Obviamente, esto no se alinea con la imagen. Son solo imágenes aleatorias, tenemos textos aleatorios. Pero aquí se entiende el punto. Si conocemos nuestro HTML, CSS y JavaScript en el front-end y sabemos cómo acceder a las API y llevarlas a nuestro front-end, entonces podemos construir una aplicación que funcione completamente. Entonces tenemos todo lo que necesitamos. Como desarrollador web front-end, todo lo que necesita es acceder a una fuente de datos. No necesitas crear el backend tú mismo, que como desarrollador front-end, prefiero esto tener que escribir aplicaciones de escritura. Solo puedo concentrarme en el front-end y hacer experiencias de usuario realmente geniales. Para concluir esta lección sobre APIs, solo quiero mostrarte otro lugar por el que podemos verificar que la solicitud de API está llegando. Si alguna vez tienes problemas con las solicitudes de API, puedes entrar en la pestaña Red, actualizar aquí, puedes filtrar por fetch XHR porque recuerda que estamos usando una fetch aquí. Esto comprobará cualquier API externa a la que nos estemos conectando. Si hago clic en esto, puedes ver el punto final de la API. Si coloco el cursor sobre él, debería mostrarte el punto final total de la API. Entonces puedes mirar aquí los parámetros que están atravesando. Desplazamiento cero, límite de cuatro, y luego podemos ver la respuesta aquí todo formateado muy bien. Hay algunos lugares para mirar la respuesta. Podemos conectarlo a la consola aquí, podemos mirar dentro de nuestra pestaña de red, o si estamos usando algo como Vue, podemos mirar dentro de aquí y ver qué se rellena dentro nuestra matriz de productos si fuéramos a capturar datos de una fuente externa y ponerlos en nuestra aplicación Vue. Podemos verlo aquí en nuestra pestaña de red o podríamos conectarlo en consola y verlo de esa manera también. Pero yo solo quería terminar con eso. Puedes ver aquí que los datos se están cruzando y ahora podemos usarlos en nuestra app. Eso es básicamente todo lo que vamos a pasar en la clase de hoy. En el siguiente video, te voy a mostrar cómo configurar tu proyecto de clase, y luego concluiremos esta clase. 12. Configuración de proyectos de clase: Para tu proyecto de clase, quiero que crees una aplicación web simple con los siguientes requisitos que utilice una API externa para mostrar datos maravillosamente. Para atenderte aquí, te voy a ayudar a configurar tu entorno de desarrollo y producción. Lo cual es una manera elegante de decir la configuración de proyectos en su computadora y los pasos para obtenerla en Internet. En primer lugar, vas a querer crear una carpeta para tu proyecto. Sólo voy a llamar a este Proyecto de Desarrollo Web Moderno, pero llámalo como quieras. Dentro de este proyecto, vamos a configurar NPM y git aquí. Lo que voy a hacer es abrir Visual Studio Code. Lo expandiré al ancho y alto de tu pantalla. Entonces usaré el atajo Comando O para abrir nuestra carpeta de códigos y abrir ese proyecto. Ahora tenemos una carpeta vacía abierta en Visual Studio Code. Entonces lo que voy a hacer es abrir la terminal, así que controle de nuevo tick. Ahora tenemos un terminal abierto en nuestra aplicación o en nuestro proyecto. Lo que voy a hacer es ejecutar git init para crear un repositorio git vacío. Esto nos ayudará a administrar las diferentes versiones de nuestro código y también a empujar nuestro código a Internet. Aquí vamos a usar páginas de GitHub en este video, pero puedes hacerlo por otros medios si quieres. GitHub Pages es la forma más fácil de hacerlo. Entonces también voy a poner aquí un init de NPM. Puedes nombrar el proyecto como quieras. Sólo voy a darle a Enter en todo solo para aceptar todos los valores por defecto. Eso nos va a dar un paquete.json. Entonces voy a crear un archivo con el nombre de archivo exacto de git ignore. Lo que hace este archivo es que proporciona una lista de archivos y carpetas que deben ser ignorados cuando empujamos nuestro repositorio. Si recuerdas la lección cuando instalamos NPM y creamos un paquete.json y ejecutamos NPM install. Se creó una carpeta de módulos de nodo. Dentro de esa carpeta de módulos de nodo, tenía todo el código diferente para los diferentes módulos. Ese código nunca cambia. En realidad no tenemos que comprometer ese código en GitHub. Podemos simplemente, donde sea que empujemos nuestro código, solo va a instalar cualquier paquete que esté listado en el archivo package.json. En realidad no necesitamos la carpeta node modules cuando enviamos este proyecto a otro lugar, solo necesitamos el package.json. Voy a quitar módulos de nodo para cuando aparezca. No queremos que los módulos de nodo pasen en git. Ahora voy a añadir mis archivos de inicio. Voy a crear un index.html. Aquí, voy a utilizar ese código repetitivo que previ al comienzo de la clase, simplemente creando un documento repetitivo HTML5 aquí. Voy a tachar hasta que llegue a documentar entre esas dos etiquetas de título. Voy a llamar a esto como quiera. Digamos que esta es una app de tareas pendientes, o mi primer sitio web, o algo así. Puedes actualizar el título aquí. Si vuelves a tocar, te metes en la etiqueta corporal. Entonces voy a crear una carpeta para CSS. Dentro de esta carpeta, cree un archivo styles.CSS aquí. Después voy a crear una carpeta JavaScript. Dentro de la carpeta JavaScript, voy a crear un main, o app, o index.js. Realmente no importa. Yo sólo voy a llamarlo Principal en esta instancia. Entonces por supuesto, necesitamos vincular estos dos archivos a nuestro archivo HTML. Aquí voy a ir enlace rel stylsheet. Entonces después de esto voy a poner href y voy a enlazar al estilo que ahora está anidado dentro de la carpeta CSS. Me aseguraré de agregar eso al camino. Entonces, dentro de nuestra etiqueta body, insertaré una etiqueta script y un atributo SRC. Aquí puede ver que podemos recorrer la ruta al archivo main.js. Ahora que tenemos todos nuestros bloques de construcción, el CSS, el JavaScript y el HTML, voy a ejecutar git add. para agregar todo a nuestro primer git commit, todo lo que es excepto los módulos de nodo, pero aún no tenemos módulos de nodo. Voy a ir a registrarme aquí. Estos son todos nuestros cambios escenializados. Podemos escribir nuestro mensaje de confirmación y luego presionar Commit aquí, o podemos hacer esto en la línea de comandos, Git commit -m para el mensaje, y llamaré a esta confirmación inicial. Ahora eso es todo comprometido. Solo necesitamos crear un repositorio git. Pero primero quiero realmente poner algo de contenido en la página. Probablemente debería haber hecho esto antes de que me comprometiera. Pero digamos que queremos un h1 con mi primer sitio web. Golpea Guardar en eso. Puedes ver aquí en nuestro panel de control de fuentes, puedes consultar qué cambios hemos realizado. Esto es muy útil durante el desarrollo. Te lo recomiendo mucho si te sientes cómodo, usa Git. Pero claro, no hablamos de Git en este curso. Si solo quieres usarlo para poner tu sitio web en línea, como te estoy mostrando aquí, entonces simplemente puedes usarlo para eso. Ahí no hay problema. Voy a abrir una ventana aquí para GitHub, y luego podremos registrarnos para obtener una cuenta de GitHub y crear nuestro repositorio remoto, que va a ser como vamos a publicar nuestro sitio web en Internet. No voy a pasar por todos los pasos para crear una cuenta de GitHub. Ya tengo una cuenta de GitHub. Es bastante común con los desarrolladores, prácticamente todos los desarrolladores tienen una cuenta de GitHub, es solo un lugar para almacenar código en línea. Una vez que tengas tu cuenta configurada, solo puedes ir a GitHub barra nueva para crear un nuevo repositorio. Voy a llamar a esto mi primer sitio web, digamos, y voy a hacerlo público porque vamos a publicar esto en Internet. No necesitamos agregar nada de esto aquí porque ya lo agregamos a nuestro proyecto. Haré clic en Crear Repositorio y aquí puedes ver que tenemos nuestro repositorio público aquí. Todo lo que necesito hacer es agarrar esta parte aquí, que agregará el origen remoto a nuestro proyecto local. Voy a copiar ese comando. También lo puedes ver aquí bajo el encabezado Empujar un repositorio existente para la línea de comandos. Entonces voy a pasar por aquí. Voy a añadir ese origen remoto. Golpea Enter. Si no hay errores, entonces debería haber funcionado. Entonces voy a comprometer este rubro, lo cual no hice la última vez. Esta vez lo haré a través de Visual Studio Code. Agregué una etiqueta de encabezado. Sólo voy a decir agregó un encabezamiento. Voy a hacer clic con el botón derecho, hacer clic en Cambio de escenario. Entonces va a estar en los cambios de etapa. Voy a presionar Commit y luego puedo hacer clic en este botón para Publish Branch. Voy a Hit Publish, y ahora hemos empujado eso a nuestro origen remoto. Aquí puedes ver mi primer sitio web. Aquí no hay nada, pero si actualizo ahora, puedes ver que el código de nuestro sitio web está ahora en GitHub. Ahora, para convertir esto en un sitio web, solo necesitamos ir y habilitar Páginas GitHub. Voy a entrar en la pestaña Configuración de aquí. Entonces voy a bajar a páginas bajo código y automatización. Después voy a hacer clic en “Desplegar desde una rama”, después voy a seleccionar la rama que solo tenemos una, que es la rama maestra. Voy a presionar “Guardar” en eso, y ahora lo que deberíamos poder hacer es ir a esta dirección de aquí mismo, que es tu nombre de usuario.github.io. Abre eso en una nueva pestaña y luego pondré barra inclinada seguida del nombre del repositorio, mi primer sitio web. Se puede ver que aún no hay una página ahí. Probablemente todavía se esté cargando y podamos verificar el estado de carga entrando en Acciones aquí. Como puedes ver, aquí se está construyendo un flujo de trabajo. Estaba en amarillo hace apenas un segundo, pero ahora ha corrido. Si nos refrescamos por aquí, verás mi primer sitio web. El proceso de implementación de nuestro sitio web una vez que hemos hecho un cambio es simplemente hacer lo que acabamos de hacer cuando agregamos ese encabezado. Nosotros solo creamos el cambio. Preparamos el cambio aquí en nuestra línea de comandos ejecutando git add. Una vez que se agrega, ejecutamos git commit con dash m para el mensaje, o usamos la interfaz de usuario en Visual Studio Code y luego o bien hacemos clic en este botón, hacemos clic en Publicar, o podemos ejecutar el comando git push origin, y luego eso debería funcionar, o más específicamente, git push origin master. Vamos a agregar un paquete ahora para mostrarte que en acción voy a ejecutar clear aquí y vamos a ejecutar ese mismo comando que teníamos antes para instalar Tailwind como una dependencia dev. NPM instalar dash capital D, tailwindcss. Golpea “Enter” en eso. Como puede ver, ahora tenemos un paquete dash loc.json archivo que se ha agregado que registra las versiones exactas de todas las dependencias. No hace falta que te preocupes por eso. Eso se acaba de generar para nosotros automáticamente, pero sí queremos comprometerlo. Puedes ver aquí que nuestro paquete.json ahora tiene una línea agregada o tres líneas agregadas para dependencias de desarrollo y tenemos Tailwind agregado. Entonces también tenemos esta carpeta de módulos de nodo, pero está en gris, lo que indica que no se comprometerá a git y por lo tanto no irá a GitHub. Pero como dije, Github rellenará esta carpeta automáticamente en el servidor dado que sabe qué dependencias instalar aquí, así que todo lo que necesitamos para empujar es el paquete.json. Lo que voy a hacer es copiar y pegar en ese archivo tailwind.config.js que teníamos antes y luego copiaré y pegaré a través de esos scripts que creamos. Aquí mismo tailwind colon build y tailwind colon run, y como puedes ver nuestros caminos se actualizan aquí. Vamos a estar buscando un archivo tailwind.css para procesar y que se compilará hasta styles.css, que es el archivo que tenemos aquí. Hagámoslo. Configuraremos un nuevo archivo aquí, lo llamaremos tailwind.css y tomaremos utilidades base de viento trasero. Entonces el otro fueron los componentes de Tailwind, que creo que va en el medio. Pulsaremos “Guardar” en eso y luego ejecutaremos npm, ejecutaremos Tailwind build. Lo ejecutaremos una vez, eso ahora actualizará nuestro styles.css antes del código de Tailwind basado en lo que hemos escrito aquí y lo que hemos incluido en nuestro archivo de configuración. Entonces si hacemos clic en Go Live para iniciar una versión local de esto, deberíamos comenzar a ver que nuestros estilos HTML predeterminados se desmoronan y ser reemplazados por Tailwind, lo que no ha sucedido. Sólo vamos a entrar en nuestro index.html aquí y comprobar que nuestra etiqueta es correcta. Me he perdido una e ahí, hoja de estilo. Si presiono Guardar en esa actualización de aquí, puedes ver que el estilo predeterminado para H1 ahora se ha eliminado porque ahora estamos usando Tailwind y puedes ver aquí todas las cosas de Tailwind que vienen a través. Lo que haremos es darle a esto un poco de estilo nuevamente a través de Tailwind, tal como lo hicimos antes, texto 5xl, fuente, negrita, y darle un margin-bottom de aproximadamente ocho píxeles. Voy a golpear “Guardar” en eso. Ya está afectando al elemento ahí mismo y así ahora tenemos nuestro proyecto con Tailwind instalado. Ahora volvamos a pasar por el proceso de implementación. Aquí hemos hecho bastantes cambios. Puedes ver aquí que arreglamos la etiqueta CSS ahí. Agregamos algunas clases de utilidad Tailwind. Package/loc.json ha sido agregado. Hemos actualizado nuestro archivo package.json. Hemos agregado el archivo de configuración Tailwind y luego todas las cosas CSS. Podemos agarrar todo esto y hacer clic con el botón derecho en “Cambios de etapa”, o de la otra manera que es agnóstica a cualquier editor de código que estés usando, podemos simplemente ejecutar git add dot para agregarlos todos como cambios de etapa. Ahí vas. Se actualizará por aquí, y luego podremos escribir un git commit con el mensaje de Tailwind agregado que ahora está comprometido. Como puedes ver aquí, podemos dar click aquí para sincronizar eso con GitHub. Ahora bien, si cambiamos por aquí, entonces esa es nuestra versión local. Esa es otra versión local. Voy a cerrar esa y luego vamos por aquí. Puedes ver en nuestros flujos de trabajo, actualmente está implementando nuestra aplicación, así que solo esperaremos a que termine. Esto va a suceder automáticamente cada vez que empujemos a GitHub porque hemos configurado la configuración de páginas en la configuración de aquí mismo, y como puedes ver, ya casi está ahí. Ahí vamos. Después de un minuto, ya se ha construido y si volvemos a la dirección donde está alojado nuestro sitio web aquí mismo, actualízate , obtienes los cambios que encontramos que hicimos hace apenas un momento en nuestra versión local. Como mencioné, cuando vamos por aquí y entramos en código aquí, puedes ver que la carpeta de módulos de nodo no está en nuestro GitHub y eso porque cuando GitHub despliega nuestro sitio web, está instalando automáticamente los módulos de nodo correctos basados en nuestro archivo package.json aquí, que le dice al servidor que lo estamos implementando para instalar ese dev dependencia y cualquier dependencia de desarrollo que dependa de esa dependencia. Ese es un flujo de trabajo de ejemplo para que ustedes lo ejecuten, para crear su proyecto de clase o cualquier proyecto en el futuro. Crea un repositorio git, convierte tu proyecto en un proyecto NPM, crea tus archivos, haz tu trabajo, empuja a GitHub, y luego puedes ver tu resultado aquí. Cuando hayas terminado y quieras compartir con la clase, puedes hacerlo en la sección de proyectos de clase. Eso es. En el siguiente video, concluiremos la clase y te mostraré cómo puedes profundizar en algunos de los conceptos de los que hablamos en la clase de hoy. Asegúrate de hacer clic en el siguiente video y vamos a terminar esta clase. 13. Conclusión: Enhorabuena, has llegado al final de esta clase sobre el desarrollo web front-end moderno. Sé que cubrimos una variedad de herramientas e idiomas en esta clase, pero permítame asegurarle que no necesita ser un experto en todos estos para comenzar con el desarrollo web front-end. La intención de esta clase era proporcionar una visión general de las herramientas y lenguajes utilizados para construir experiencias front-end en la web. En esta clase corta, hemos cubierto un conjunto completo de conceptos de desarrollo web front-end que para aprender correctamente tomaría muchas más horas de aprendizaje y práctica. Espero que a través de esta clase, hayas obtenido una visión general de dónde encaja cada pieza de tecnología en el proceso de desarrollo web front-end. Si quieres profundizar, puedes consultar mi gama completa de cursos en christhefreelancer.com/courses. Como siempre, si tienes alguna duda o inquietud sobre lo que cubrimos en la clase de hoy, deja un comentario en el cuadro de discusión a continuación, y haré todo lo posible para señalarte en la dirección correcta. Como siempre, gracias por ver y espero volver a verte en algunas de mis otras clases.