1-INTRO.pptx

Tema 0: Presentación Asignatura: Diseño de Interfaces Web Planificación de la asignatura Impartida por Tacio Camba Espí ○ Contacto - [email protected] Tutorías - Concertar cita previa por mail En remoto - A conveniencia de alumno y profe...

Tema 0: Presentación Asignatura: Diseño de Interfaces Web Planificación de la asignatura Impartida por Tacio Camba Espí ○ Contacto - [email protected] Tutorías - Concertar cita previa por mail En remoto - A conveniencia de alumno y profesor Presencial - En el centro, jueves de 20:00 a 21:00 Dudas, sugerencias y quejas 12 sesiones (10 ordinarias + 1 repaso + 1 examen) ○ Jueves 16:00 a 19:00 - Desde el 19/09/2024 al 16/01/2025 ○ Sesión de repaso - Jueves 9/01/2025 ○ Examen 1ra convocatoria - Jueves 16/01/2025 ○ Examen 2da convocatoria - Jueves 05/06/2025 2 Ciclo Superior Desarrollo Aplicaciones Web Evaluación 3 tareas opcionales (30% de la nota total) ○ Ejercicio teórico / prácticos sobre uno o varios temas impartidos en el momento de su publicación ○ Publicada como tarea en el Classroom de la asignatura ○ Entrega de la tarea Fecha y hora límite - Ver planificación y enunciado (prioridad del enunciado) Medio de entrega - Tarea de Classroom correspondiente Fichero apellido-nombre.zip (no se corregirá de otro modo) Retrasos en la fecha de entrega Menos de 24 h → Se restan 1 punto Entre 24 y 48 h → Se restan 2 puntos Entre 48 y 72 h → Se restan 3 puntos Más de 72 h → Suspenso con un 0 ○ Publicación de calificaciones y soluciones en Classroom Fecha de entrega oficial + 10 días 3 Ciclo Superior Desarrollo Aplicaciones Web Evaluación Examen (1ra conv. - 70% / 2da conv. - 100%) ○ Prueba teórico-práctica sobre los contenidos de la asignatura al completo ○ 1ra convocatoria - Jueves 16/01/2025 ○ 2da convocatoria - Jueves 05/06/2025 Las calificación final de la asignatura se redondeará al entero más próximo ○ 8.4 ~ 8 ○ 5.5 ~ 6 La calificación del examen en 2da convocatoria será la media de la nota del examen oficial y el de recuperación. En caso de que la calificación sea superior a 4.5 pero inferior a 5, se calificará con un 5 (siempre y cuando el examen de recuperación esté aprobado con un 5 o más) Plagio (examen y tareas) ○ Calificación de 0 para el que copia ○ Calificación de 0 para el que es copiado Revisión de calificaciones ○ Se solicitará por mail al profesor en los 7 días siguientes a la comunicación de la nota ○ La solicitud de revisión implica recalificación (a favor o en contra del alumno) en caso de errata 4 Ciclo Superior Desarrollo Aplicaciones Web Planificación de sesiones, tareas y exámenes 5 Ciclo Superior Desarrollo Aplicaciones Web Planificación de sesiones, tareas y exámenes Tarea 1: ○ Fecha de publicación: ○ Fecha de entrega: ○ Fecha final de prórroga: Contenido: ○ Ponderación sobre la media: Tarea 2: Tarea 3: 6 Ciclo Superior Desarrollo Aplicaciones Web Materiales y recursos Apuntes, enunciados y videos ○ Classroom de la asignatura Acceso por invitación enviada al correo del ciclo Invitación no recibida → Mail al profesor Código ○ Repositorio Github de la asignatura POR DETERMINAR Todas las sesiones serán grabadas ○ Classroom 7 Ciclo Superior Desarrollo Aplicaciones Web Temario 1. Introducción (~ 1 sesión) I. Índice de grabaciones 1. Una visión a alto nivel del desarrollo web 2. Configurando el editor de código II. Índice de 3. Un breve repaso a HTML(5) grabaciones 22-23 4. Una pequeña introducción a CSS(3) 5. Colores III. Índice de 6. Herramientas de desarrollador grabaciones 23-24 7. Referencias 8 Ciclo Superior Desarrollo Aplicaciones Web  9 Ciclo Superior Desarrollo Aplicaciones Web Tema 1: Introducción Asignatura: Diseño de Interfaces Web  11 Ciclo Superior Desarrollo Aplicaciones Web Contenidos 1. Una visión a alto nivel del desarrollo web 2. Configurando el editor de código 3. Un breve repaso a HTML(5) 4. Una pequeña introducción a CSS(3) 5. Colores 6. Herramientas de desarrollador 7. Referencias 12 Ciclo Superior Desarrollo Aplicaciones Web Desarrollo front-end vs back-end 1. Un usuario solicita acceso a un sitio web desde su navegador 2. El servidor web (nginx, apache http…) responde al navegador web devolviéndole un conjunto de ficheros HTML, CSS y JS que aloja 3. El navegador recibe estos ficheros interpreta su código y renderiza la página web solicitada por el usuario 13 Ciclo Superior Desarrollo Aplicaciones Web Desarrollo front-end vs back-end https://sta ckoverflo w.com/ 14 Ciclo Superior Desarrollo Aplicaciones Web Desarrollo front-end vs back-end El proceso de escritura de estos ficheros HTML, CSS y Javascript que el navegador es capaz de interpretar recibe el nombre de desarrollo Front-End Las tecnologías base del desarrollo front-end son HTML, CSS y Javascript En el ejemplo anterior, los ficheros que componen el sitio web al que accede el usuario, se encuentran almacenados en un servidor web y son enviados tal cual al navegador, sin ninguna transformación. Tenemos entonces un sitio web estático… … que no es lo habitual en la actualidad, como veremos en el ejemplo siguiente 15 Ciclo Superior Desarrollo Aplicaciones Web Desarrollo front-end vs back-end 1. Un usuario solicita acceso a un sitio web desde su navegador 2. El servidor web devuelve al navegador del usuario los ficheros correspondientes, pero en esta ocasión, transformados por una aplicación web o servidor de backend (que se apoya en servidores de BD) de acuerdo a alguna lógica 3. El navegador web interpreta los ficheros recibidos mostrando al usuario un sitio web construido en tiempo real conforme a la lógica de la aplicación 16 Ciclo Superior Desarrollo Aplicaciones Web Desarrollo front-end vs back-end https://s tackov erfl ow.com / Ficheros dinámicos “calculados” en el back 17 Ciclo Superior Desarrollo Aplicaciones Web Desarrollo front-end vs back-end El proceso de escribir la lógica de aplicación con la que ensamblar los ficheros que constituyen el sitio web de forma dinámica se denomina desarrollo Back-End Es importante distinguir entre un servidor web y un servidor de aplicaciones o backend ○ El servidor web devuelve un conjunto de ficheros que aloja en respuesta a una solicitud de navegador ○ El servidor de aplicaciones o backend ejecuta la lógica que determina el comportamiento dinámico de un sitio web Python, Java, PHP, Node JS… son algunos ejemplos de lenguajes de programación backend 18 Ciclo Superior Desarrollo Aplicaciones Web Los 3 lenguajes del front-end El desarrollo back-end no entra en el alcance de esta asignatura, de modo que nos centraremos en los tres lenguajes o tecnologías base del desarrollo front-end CONTENIDO PRESENTACIÓN EFECTOS DINÁMICOS Y APLICACIONES WEB 19 Ciclo Superior Desarrollo Aplicaciones Web Los 3 lenguajes del front-end HTML es el lenguaje que permite definir la estructura y el contenido de una página web CSS permite describir la presentación, el aspecto y la disposición de dicho contenido Javascript dota de efectos dinámicos e interactivos al sitio web JS puede emplearse para construir aplicaciones web completas (back-end incluido) HTML y CSS NO son lenguajes de programación, Javascript SI lo es 20 Ciclo Superior Desarrollo Aplicaciones Web Los 3 lenguajes del front-end ADJETIVO CONTENIDO PRESENTACIÓN p {color: blue} NOMBRE significa “el color del párrafo es azul” significa “párrafo” VERBO p.hide() significa “esconde el párrafo” EFECTOS DINÁMICOS Y APLICACIONES WEB 21 Ciclo Superior Desarrollo Aplicaciones Web Los 3 lenguajes del front-end Para construir un sitio o aplicación web se utiliza una combinación de HTML, CSS y Javascript El desarrollo front-end moderno se realiza utilizando “frameworks”, que son paquetes de software que proporcionan módulos de código reutilizable, tecnologías de front-end estandarizadas y bloques o componentes que hacen más fácil y rápido para el desarrollador la construcción de aplicaciones web o interfaces de usuario. Existen varios frameworks de desarrollo front-end y la mayoría se basan en Javascript. Entre los más populares se encuentran React, Vue, Svelte, Angular… 22 Ciclo Superior Desarrollo Aplicaciones Web Configurando el editor de código HTML, CSS (recordemos que no son lenguajes de programación) y JS no requieren sistemas en tiempo de ejecución, máquinas virtuales o compiladores específicos ya que son renderizados (HTML y CSS) e interpretados por el navegador web Un editor de texto plano y un navegador web son suficientes para el desarrollo web Existen IDEs (más bien editores de texto “potenciados”) que facilitan enormemente el proceso de desarrollo ○ Visual Studio Code - Desarrollado por Microsoft, es posiblemente el más empleado en desarrollo web en este momento. Es gratuito, ligero y cuenta con un ecosistema de plugins muy extenso. Será el empleado durante el curso. ○ Sublime Text - Similar a VSCode pero de pago (aunque dispone de un versión de evaluación) ○ Webstorm - IDE de pago (aunque gratuito para ciertos colectivos, como estudiantes o profesores), desarrollado por Jetbrains. A diferencia de los anteriores no requiere configuración inicial alguna para ser utilizado de forma productiva. Durante el curso se utilizará Visual Studio Code 23 Ciclo Superior Desarrollo Aplicaciones Web Configurando el editor de código Descargar e instalar VSCode desde su web oficial. Dispone de versiones para los SO principales. ○ Dispone de una versión de navegador (con limitaciones respecto de la versión de escritorio), indicada para desarrollos rápidos o desde los repositorios de Azure Ejecutar VSCode e instalar la siguiente extensión 24 Ciclo Superior Desarrollo Aplicaciones Web Configurando el editor de código Prettier Code Formatter - Formateo automático del código. Mantiene los proyectos limpios, uniformes y coherentes, a pesar del formato “opinionado” ○ Id. de extension - esbenp.prettier-vscode Configuración Establecer Prettier como formateador por defecto (default formatter) 25 Ciclo Superior Desarrollo Aplicaciones Web Configurando el editor de código Configuración ○ Establecer Prettier como formateador por defecto (default formatter) ○ Activar el formateo automático al guardar (format on save) 26 Ciclo Superior Desarrollo Aplicaciones Web Configurando el editor de código Configuración ○ Establecer Prettier como formateador por defecto (default formatter) ○ Activar el formateo automático al guardar (format on save) ○ Activar el guardado automático cuando se cambia fichero o se abre una nueva pestaña (auto save) 27 Ciclo Superior Desarrollo Aplicaciones Web Configurando el editor de código Configuración ○ Establecer Prettier como formateador por defecto (default formatter) ○ Activar el formateo automático al guardar (format on save) ○ Activar el guardado automático cuando se cambia fichero o se abre una nueva pestaña (auto save) ○ Establecer el número de espacios por tabulación a 2 (tab size) 28 Ciclo Superior Desarrollo Aplicaciones Web Configurando el editor de código Modificar el tema o estilo visual del editor ○ Se puede personalizar de forma manual ○ … o utilizar alguno de los temas disponibles en el marketplace (funcionan como extensiones) ○ En este curso se empleará el tema One Monokai Id. de extension - azemoh.one-monokai Configuración (color theme) 29 Ciclo Superior Desarrollo Aplicaciones Web Configurando el editor de código Instalar las siguientes extensiones ○ Image Preview - Previsualización de imágenes. Id. de extension - kisstkondoros.vscode-gutter-preview ○ Color Highlight - Visualización de colores en código Id. de extension - naumovs.color-highlight ○ Auto Rename Tag - Renombrado automático de tags Id. de extension - formulahendry.auto-rename-tag ○ Live Preview Id. de extension - ms-vscode.live-server ○ Live Server - Servidor web embebido en el editor Id. de extension - ritwickdey.LiveServer ○ https://htmlcolorcodes.com/es/ Activar el cierre automático de tags ○ Configuración > auto closing tags > Habilitar el checkbox 30 Ciclo Superior Desarrollo Aplicaciones Web Un breve repaso a HTML(5) HyperText Markup Language Es un lenguaje de marcas, que permite al desarrollador describir y estructurar el contenido de una página web (no es un lenguaje de programación, tercer aviso) Está formado por elementos que describen diferentes tipos de contenido: párrafos, enlaces, encabezados, imágenes, video… Renderizado por los navegadores web 31 Ciclo Superior Desarrollo Aplicaciones Web Un breve repaso a HTML(5) 32 Ciclo Superior Desarrollo Aplicaciones Web Un breve repaso a HTML(5) Elementos estructurales básicos Document El viewport es el área útil donde se muestra el sitio web ○ Si no se especifica su tamaño, el navegador escala el contenido para que se visualice completo en la pantalla del dispositivo ○ Si especificamos su tamaño los contenidos se ajustarán a la pantalla de cada dispositivo de forma correcta 33 Ciclo Superior Desarrollo Aplicaciones Web Un breve repaso a HTML(5) Construcción de una página web básica a partir del contenido sin formatear ○ Clonar el siguiente repositorio: https://github.com/tcamba-ciclos-montecastel o/diw-23 ○ … o descargar el fichero ZIP publicado en el Classroom de la asignatura en la sección correspondiente al Tema 1 - Introducción ○ Directorio t1-introduccion/html/web-blog 34 Ciclo Superior Desarrollo Aplicaciones Web Un breve repaso a HTML(5) 📘 The Code Magazine Blog Challenges Flexbox CSS Grid The Basic Language of the Web: HTML alt="Headshot of Laura Jones" height="50" width="50" / Posted by Laura Jones on Monday, June 21st 2027 35 Ciclo Superior Desarrollo Aplicaciones Web Un breve repaso a HTML(5) All modern websites and web applications are built using three fundamental technologies: HTML, CSS and JavaScript. These are the languages of the web.... The opening tag The closing tag The actual element You can learn more at MDN Web Docs 36 Ciclo Superior Desarrollo Aplicaciones Web Un breve repaso a HTML(5) Related posts How to Learn Web Development By Paschalis Aladdin... Copyright © 2027 by The Code Magazine. h1 { color: green; } 📘 The Code Magazine... 40 Ciclo Superior Desarrollo Aplicaciones Web Una pequeña introducción a CSS(3) h1 { font-size: 26px; font-family: sans-serif; text-transform: uppercase; font-style: italic; } h2 { font-size: 40px; font-family: sans-serif; } h3 { font-size: 30px; font-family: sans-serif; } h4 { font-size: 20px; font-family: sans-serif; text-transform: uppercase; text-align: center; } p{ font-size: 22px; font-family: sans-serif; line-height: 1.5; } li { font-size: 29px; font-family: sans-serif; } 41 Ciclo Superior Desarrollo Aplicaciones Web Colores R G B Modelo RGB: Cada color puede 255 0 0 R G B R G B ser representado como una 255 255 0 255 0 255 combinación de ROJO, VERDE y AZUL R G B R G B Cada color base puede tomar 255 255 255 0 0 0 valores entre 0 y 255 RGB codifica por tanto 16.8 millones de colores diferentes R G B R G B 0 255 0 0 0 255 R G B 0 255 255 42 Ciclo Superior Desarrollo Aplicaciones Web Colores Notación RGB Notación Hexadecimal ○ Modelo RGB estándar ○ En lugar de usar una escala de 0 a 255, vamos rgb(0, 255, 255) desde 0 a FF (hexadecimal) ○ Modelo RGB con transparencia #00ffff rgba(0, 255, 255, 0.3) ○ Cuando todos los colores son pares idénticos se Normalmente se utiliza notación hexadecimal salvo acorta a cuando se necesita transparencia #0ff #f4b33f #f4b33fb3 rgb(244, 179, 63) rgba(244, 179, 63, 0.7) 43 Ciclo Superior Desarrollo Aplicaciones Web Colores Cuando los colores en los 3 canales son los mismos obtenemos un tono de gris Hay 256 grises puros entre los que elegir 44 Ciclo Superior Desarrollo Aplicaciones Web Colores Herramienta de selección de colores de VSCode ¿Qué color aplicará al texto de h1? h1 { font-size: 26px; font-family: sans-serif; text-transform: uppercase; font-style: italic; color: #1098ad; color: #0cf72c69; } El último en ser declarado 45 Ciclo Superior Desarrollo Aplicaciones Web Herramientas de desarrollador Para seguir el curso se recomienda el uso del navegador Google Chrome Click derecho + Inspeccionar o F12 Su manejo básico resulta casi imprescindible para desarrollo web 46 Ciclo Superior Desarrollo Aplicaciones Web Herramientas de desarrollador Permite visualizar y editar el HTML y CSS de la página web o de un elemento a seleccionar 47 Ciclo Superior Desarrollo Aplicaciones Web Herramientas de desarrollador Ficheros descargados por el navegador desde el servidor web para renderizar la página web index.html y otros ficheros como hojas de estilo, scripts JS, fuentes, imágenes, logos… 48 Ciclo Superior Desarrollo Aplicaciones Web Referencias Visual Studio Code ○ Emmet - Cheatsheet de Emmet. Emmet es una herramiento que extiende editores de texto como VSCode y proporciona entre otras cosas atajos o macros para facilitar el proceso de desarrollo HTML ○ MDN Web Docs HTML - Web de referencia de Mozilla con documentación sobre HTML5 ○ CSS Tricks HTML Entities - Listado de entidades HTML disponibles CSS ○ MDN Web Docs CSS - Web de referencia de Mozilla con documentación sobre CSS3 ○ Codrops CSS - Otra web de referencia muy completa con una explicación detallada de todas los elementos del lenguaje CSS ○ CSS for People Who Hate CSS - Guía sobre cómo escribir código CSS mejor, más limpio y reutilizable Colores ○ InfinityInsight 3D Color Picker - Herramienta que permite seleccionar colores sobre un cubo en 3d. Ayuda a sentar una intuición sobre el modelo RGB ○ Otro selector de colores - Herramienta para trastear con los colores Herramientas de desarrollador ○ Chrome DevTools Docs - Documentación oficial de las herramientas de desarrollador de Chrome 49 Ciclo Superior Desarrollo Aplicaciones Web Índice de grabaciones ACTUAL Sesión 1 - Jueves 19 de Septiembre de 2024 ○ Inicio Sesión 1. Criterios de evaluación y planificación - 0h0m0s ○ Tema 1. Introducción - 0h48m0s ○ Descanso - 1h31m0s ○ Configuración del IDE - 1h52m0s ○ Repaso HTML - 2h14m0s ○ Introducción a CSS - 2h30m0s 50 Ciclo Superior Desarrollo Aplicaciones Web Índice de grabaciones 23-24 Sesión 1 - Viernes 22 de Septiembre de 2023 (17:00 a 20:00) ○ Inicio Sesión 1. Criterios de evaluación y planificación - 0h0m0s ○ Tema 1. Introducción - 0h48m0s ○ Descanso - 1h31m0s ○ Configuración del IDE - 1h52m0s ○ Repaso HTML - 2h14m0s ○ Introducción a CSS - 2h30m0s Sesión 2 - Viernes 29 de Septiembre de 2023 (17:00 a 20:00) ○ Inicio Sesión 2. Repaso sesión anterior - 0h0m0s ○ Ejemplo HTML básico - 0h10m37s ○ Descanso - 1h09m0s ○ CSS Básico. Selectores - 1h31m0s ○ CSS Básico. Herencia. Modelo de Caja - 2h11m0s 51 Ciclo Superior Desarrollo Aplicaciones Web Índice de grabaciones 23-24 Sesión 3 - Jueves 05 de Octubre de 2023 (17:00 a 20:00) ○ Inicio Sesión 3. Repaso sesión anterior - 0h0m0s ○ Selectores. Juego CSS - 0h20m0s ○ Ejemplo de clase. Web Tema 2. - 0h33m0s ○ Descanso - 1h17m0s ○ Posicionamiento absoluto - 1h32m0s ○ Propiedad float - 2h05m0s ○ Introducción a Flexbox - 2h35m0s Sesión 4 - Jueves 26 de Octubre de 2023 (17:00 a 20:00) ○ Inicio Sesión 4. Repaso sesión anterior - 0h0m0s ○ Clearfix - 0h9m0s ○ Flexbox - 0h33m0s ○ Descanso - 1h14m0s ○ Grid - 1h36m0s ○ @Media queries - 2h43m0s 52 Ciclo Superior Desarrollo Aplicaciones Web Índice de grabaciones 22-23 Sesión 1 - Jueves 15 de Septiembre de 2022 (17:00 a 20:00) ○ Inicio Sesión 1. Criterios de evaluación y planificación - 0h0m0s ○ Temario Asignatura - 0h35m0s ○ Desarrollo Web a alto nivel y repaso de HTML - 1h10m0s ○ Ejemplo HTML - 1h47m0s ○ CSS Básico - 2h31m0s ○ Fin Sesión 1 - 2h25m0s Sesión 2 - Viernes 23 de Septiembre de 2022 (17:00 a 20:00) ○ Inicio Sesión 2. Continuación CSS Básico - 0h0m0s ○ Colores - 0h21m10s ○ Ejemplo de estilos básicos - 0h35m0s ○ DevTools de Chrome - 1h5m0s ○ Inicio Tema 2. Selectores - 1h39m0s ○ Herencia - 2h49m0s ○ Modelo de caja - 2h52m 53 Ciclo Superior Desarrollo Aplicaciones Web Índice de grabaciones 22-23 Sesión 3 - Viernes 07 de Octubre de 2022 (17:00 a 20:00) ○ Inicio Sesión 3. Continuación CSS Básico - 0m0s ○ Modelo de caja - 10m0s ○ Tipos de caja - 38m56s ○ Posicionamiento absoluto - 1h04m17s ○ Descanso - 1h09m00s ○ Continuación posicionamiento - 1h27m00s ○ Pseudo-elementos - 1h42m00s ○ Layouts - 2h00m00s ○ Float - 2h28m00s ○ Juego Selectores - 2h42m00s ○ Fin - 2h46m00s Sesión 4 - Viernes 14 de Noviembre de 2022 (17:00 a 20:00) ○ Inicio Sesión 4. Continuación CSS Avanzado - 0m0s ○ Ejercicio p.absoluto y pseudoelementos - 18m0s ○ Float. Ejemplo Float - 40m0s ○ Descanso - 1h19m ○ Flexbox - 1h37m ○ Ejemplo Propiedades Flex - 1h54m ○ Fin - 2h44m 54 Ciclo Superior Desarrollo Aplicaciones Web Índice de grabaciones 22-23 Sesión 5 - Viernes 27 de Octubre de 2022 (17:00 a 20:00) ○ Inicio Sesión 5. Continuación CSS Avanzado - 0m0s ○ Flexbox. Ejemplo diap. 99 - 20m32s ○ CSS Grid. Teoria - 1h6m0s ○ Descanso - 1h26m20s ○ CSS Grid. Ejemplo diap. 111 - 1h42m0s ○ CSS Grid. Grid Areas - 2h5m0s ○ Media Queries. Teoria - 2h16m0s ○ Fin - 2h47m0s Sesión 6 - Viernes 4 de Noviembre de 2022 (17:00 a 20:00) ○ Repaso sesión 5 - 0h0m0s ○ Ejemplo Grid MQ - 0h27m0s ○ Transiciones - 1h05m0s ○ Descanso - 1h17m0s ○ Cont. transiciones - 1h31m49s ○ Animaciones - 1h42m00s ○ Ejercicio propuesto Reloj - 1h57m30s ○ Unidades CSS - 2h28m0s ○ Pixel CSS - 2h35m0s 55 Ciclo Superior Desarrollo Aplicaciones Web Índice de grabaciones 22-23 Sesión 7 - Viernes 11 de Noviembre de 2022 (17:00 a 20:00) ○ Repaso sesión 6- 0h0m0s ○ Ejemplo Reloj - 0h17m0s ○ Bootstrap - 0h40m ○ Descanso - 1h17m40s ○ Cont. BS- 1h34m0s ○ Ejemplo BS GRID - 1h45m0s ○ Utilidades BS - 1h45m0s ○ Fin - 2h45m0s Sesión 8 - Viernes 19 de Noviembre de 2022 (17:00 a 20:00) ○ Repaso sesión 7 - 0h0m0s ○ Actividad Propuesta - 0h22m30s ○ Solución Actividad Propuesta - 0h58m0s ○ Descanso - 1h19m0s ○ BS - Cards - 1h36m0s ○ BS - Dropdowns / Navs-Tabs / Navbars - 2h03m0s ○ BS - Carousel - 2h35m0s ○ Fin - 2h48m0s 56 Ciclo Superior Desarrollo Aplicaciones Web Índice de grabaciones 22-23 Sesión 9 - Viernes 25 de Noviembre de 2022 (17:00 a 20:00) ○ Repaso sesión 8 - 0h0m0s ○ Introducción Sass - 0h10m0s ○ Anidamiento- 0h31m0s ○ Variables e Interpolación - 0h44m0s ○ At Rules- 0h52m0s ○ Descanso- 1h03m0s ○ Continuación At Rules - 1h18m0s ○ Ejemplo 1- 1h30m0s ○ Mixins- 2h15m0s ○ Fin- 2h15m0s Sesión 10 - Jueves 2 de Noviembre de 2022 (17:00 a 20:00) ○ Repaso sesión 9 - 0h0m0s ○ Ejemplo 2- 0h29m0s ○ Flow control- 0h54m0s ○ Descanso- 1h11m0s ○ Ejercicio 3- 1h30m0s ○ Actividad/Ejercicio 4 - 2h13m44s ○ Fin- 3h0m0s 57 Ciclo Superior Desarrollo Aplicaciones Web