Introducción a Bootstrap y desarrollo frontend

Transcripción generada automáticamente de FI-7669-Fundamentos de Ingeniería SF-77901-AN_ N3A0826 _FIS 08-1.mp3.

Resumen

La sesión se centra en la introducción al desarrollo frontend y la herramienta Bootstrap. Se repasa la separación entre lógica de negocio (backend, en la carpeta domain) y la interfaz de usuario (frontend), destacando que en el obligatorio la lógica se implementará con clases TypeScript sin persistencia de datos. Se enfatiza la importancia de mantener la consistencia entre el diagrama de clases y la implementación, y no inyectar lógica de negocio en el main. Luego se presentan buenas prácticas HTML: formateo, metadatos, separación de estilos, etiquetas semánticas, nomenclatura y diseño responsivo. Se introduce Bootstrap como framework frontend creado por Twitter, que ofrece componentes predefinidos y un sistema de grillas de 12 columnas para lograr diseños adaptables. Se explica su utilidad para estandarizar estilos y acelerar el desarrollo, y se recomienda explorar la documentación oficial, especialmente para componentes como cards, botones y carruseles. Finalmente, se realiza un ejercicio práctico donde los estudiantes deben forkear un repositorio, conectar Bootstrap y aplicar estilos a una página, con énfasis en el uso de la documentación. Se dan indicaciones sobre la clase 'active' en carruseles y el orden de carga de Bootstrap y CSS personalizado.

Puntos clave

Separación entre lógica de negocio (domain) e interfaz de usuario (frontend).
Bootstrap es un framework frontend con sistema de grillas de 12 columnas y componentes predefinidos.
Buenas prácticas HTML: metadatos, etiquetas semánticas, separación de estilos y diseño responsivo.
El ejercicio práctico requiere forkear un repositorio, conectar Bootstrap y aplicar estilos usando la documentación.
En carruseles, solo el primer ítem debe tener la clase 'active'.
Cargar primero Bootstrap y luego el CSS propio para permitir sobrescritura de estilos.

Transcripción

Bueno, este riso de oír un poquito más de lo que esperó, pero no importa. Bueno, ¿cómo estamos hoy? Hoy ya nos ponemos al día con el cronograma que nos habíamos derzado un poco y el objetivo del día de hoy va a ser ver un poco el teórico de lo que es Woodstrap y después vamos a hacer un práctico con Roxana. Expectativas con el teórico en realidad es presentarles la herramienta. El objetivo un poco es también que ustedes interactúen con la documentación para poder solucionar el ejercicio que les tenemos propuesto. Pero bueno, vamos a ver un poquito de conceptos relacionados a lo que es desarrollo frontend y desarrollo vaquete. Antes de hablar de positiva, voy a preguntar una preguntita. ¿Quién es aún explorado un poco lo que es el repositorio del proyecto en lo que respecta al código solo por chumiar nadie. Tenía tiempo con una lista de algo. Contrides. O sea, ahí está. Era algo. Sí, bueno, no está perfecto. Se ha capacidad de atención. Bien. ¿Qué pasa? usuario y tener por separado lo que es la lógica de negocio, cómo va a estar plasmada la lógica de negocio a través de clases que en teoría tendrían que ser consistentes con el diagrama que ustedes hicieron en las etapas iniciales que van a entregar en el obligatorio 1. Entonces, dicho eso, al tener esto separado, vamos a escribir acá, textura, vamos a tener, Domei, ah mira, tiene que ser que, digo ahí. ¿Qué ocurre? Que esto, cuando lo vemos en la calle con el nombre de backend, implica un conjunto de herramientas, capaces de desarrollar APIs, frameworks, que no vamos a tocar acá en el curso y que, de hecho, en el obligatorio de ustedes, vamos a tener simplemente clases en TypeScript y no vamos a tener persistencia de datos. Así que, en este sentido, nos interesa a nivel del obligatorio nada más saber que nos trabajen en realidad simplemente no las lican en negocio en esta carpeta de domain. Pero en el caso del interfaz de usuario si vamos a estar trabajando un poco más. Bueno, en domain también vamos a trabajar un montón, pero nos vamos a apoyar con una tecnología adicional en el interfaz de usuario que es lo que vamos a hablar hoy es Buster. Tiene imagino que ya, bueno, pregunto, lo han escuchado antes. Sí. ¿De lo nuevo el día que tanta estima le tienen? No. Bueno. Tienes una oportunidad para hacer las pases. Y si no, bueno, demócrata de quién manda bueno entonces vamos a hablar un poquito de sarayón fronén y va a quedar buenas prácticas html buscar como tal y los componentes de iobal al endergo de la positiva van a haber algo polémico que yo creo que cuando salgas yo no lo voy a decir que es pero creo que cuando salgas solo positiva van a ver algo polémico. Que yo creo que cuando salgas, yo no lo voy a decir qué es, pero creo que cuando salgas solito ustedes van a alterarse un poco y van a decir "no, no, no" y yo estaré con ustedes. Pero nada, esa es la señal, vamos a ver si ocurre o no. Capaz no me dan bola y pasa por alto. Veamos que pasa. Entonces, "De Salud y Offronen". Se refiere a la creación de la parte visual y la interfaz de usuario de aplicaciones web y sitios web. Se centren lo que los usuarios ven y con lo que interactúan directamente en sus navegadores. Rolejo asociado a esto es diseñador web y desarrollador de UI. Esto básicamente es la manera de implementar todos los conceptos que vimos en la clase pasada para los que vinieron y para los que no. Estudiamos un poco los conceptos de diseño, entendemos un poco los principios de poder darle feedback al usuario lo que estaba sucediendo, vimos tipos de diseño, vimos flat design. Al final del día, ustedes van a implementarlos como precisen. Pero algo que es importante a tener en cuenta acá es que al desarrollar la interfaz de usuario, no solamente tenemos que pensar en que funcione, sino que de pronto vamos a tener que tener presente estos principios que ya estamos estudiando. Un nuevo ejemplo, la formación es un conjunto de reglas sin taxis que permite a los desarrolladores que vinculen a instrucciones. Ejemplos HTML. Ya has escrito "script". Hasta ahora no hay… Bueno, ¿perá que el profesor le olvido resinar la diapapo? ¿Será que está mal? Y un pequeño error. Ya está. Sin embargo, hecho temeles con un enjuaje etiquetado y lo vamos a utilizar para este tema de interfaz de usuario. Y de hecho ya lo hemos utilizado para los ejercicios que ya vimos. Y de hecho es un ple requisito para la asignatura, así que comienzan el problema. Luego tenemos frameworks que son colecciones de herramientas que nos permiten trabajar de una forma más estandarizada y poder reutilizar ciertos componentes y a su vez no reinventar la rueda. Pueden haber ciertas inticiones dentro de que una librería hay un framework. Acá se le presenta como framework, React, AngularView, Next.js, Bustrap y vamos a utilizar Bustrap precisamente. En contraparte tenemos el desarrollo backend que se refiere a la implementación de la lógica de la solución. No nos pasemos en empresa nomás de la solución. Entonces, en nuestro caso en el obligatorio esta lógica está en donde? En la carpeta de OMEI. Y simplemente a través de qué? Y como es un clase, vamos a tener dos cosas. Va a tener más cosas, pero dos cosas importantes, atributos y métodos. ¿Verdad? ¿Qué pasa? Y voy a aprovechar que estamos hablando de esto para hacer una advertencia. Hay una tendencia, un vicio de que lo que no logran resolver como lógica de negocio en las clases, se le inyectan al Mainties y bueno, y aquí, papá, papá, papapá y tratan de resolver todo ahí. No dan eso porque al final le vamos a decir eso no se puede y van a haber problemas y pueden decir uno del tiempo, uno del tiempo y bueno, está. No va a funcionar así. Cuando veamos este unitario se van a dar cuenta del por qué es importante respetar esto. Las cosas donde tienen que ir. Por supuesto que va a haber lógica relacionada al interf interfaz en SMTES, pero no metanglónica de negocio ahí. Yo espero que haya consistencia entre el diagrama que entreguen el obligatorio uno y las clases que te implementadas para el dos y si hay algún cambio tendría que estar document documentado y explicar por qué. Ay bueno ya listo, se puede. Bueno, pero documentelo por lo menos. Hasta acá ya lo quieras decir. No, es eso. Es lo que se hace perfecto. Muy bien. Back end y prondend. Validaciones lógicas en el cliente, Interpash Web, consumo de APIs, y en el que todo el tema de asegurar rendimiento, seguridad, microservicios, etcétera. Esto lo vamos a ver más a profundidad en nuestro materia igual. De vuelta, ¿no van a hacer APIs para el obligatorio? ¿No vamos a hacer APIs para el obligatorio? ¿No queremos persistencias en el obligatorio? Por lo menos con base de datos, con lo que al esto les pueden hacer lo que ustedes quieren. Pero vamos a mantener igual la separación entre interfaz y lógica. Y la lógica tiene que estar en sus clases y sus métodos, un año el 20 es porque nos provocó. Lo dije tres veces ya, pero… Muy bien. Buenas prácticas HTML. Formatear código, usó metadatas, separar contenido de estilo, estructurar el contenido, etiquetas semánticas, nomenclatura de elementos, formulario y diseño responsivo. Profes, puedes dejar de leer. En este momento no. Pero algo que si quiero mencionar es que todas estas buenas prácticas la vamos a garantizar en las unidades de accesibilidad y de calidad de código. Así que lo vamos a retocar en su momento. Esto lo vamos a profundizar más en calidad de código, pero vamos a quedarnos con los titulares. En términos buenas, pero el HTML, que va a ser fumateal código aplicando en estándar, después podemos tener ciertas ideas estándares, uso de metadata, por ejemplo, ¿quién sabe qué es metadata? Sí, metadata es que compone un archivo. Claro, es como dato de los datos. Es la creación. Claro, esos son ejemplos, sí. En el caso.al de Html, vamos a referirnos al tipo de documento, al lenguaje del documento, etcétera. Separación de contenido de estilos. Evitemos inyectar estilos en el HTML de alovestias, cuando podemos tener una parte de CSS. Y estructurales contenidos. Esto va a ser muy importante cuando vemos accesibilidad, así que vayan teniéndolo presente ya. Etiquetas semánticas también. ¿A qué no le pedimos con semánticos? No para medir a todo. ¿Cómo? artículo, encabezado, figura, párrafo y… "Furriff". Hay un problema, ¿no? No hay problema. Pide para gente. Ahí está. Y no todo dice que no se sepa qué es cada cosa. ¿Verdad? Tile una microtura de elemento. De vuelta, esto me va a interesar más profundizarlo cuando veamos calidad de código, que es la unidad 4. Bueno, esto es muy interesante ahora y es el diseño responsivo. Y no sé si recuerden, pero los primeros ejercicios que hicimos este semestre cuando vimos HelloFish, HelloGear, y todo eso, lo primero que nos pedían era poner el navegador en modo celular para ver cómo se comportaban los elementos de la interfaz de usuario, ¿verdad?amente, Bustram nos va a ayudar a poder definir reglas para que esos comportamientos estén definidos y no caiga la suerte. Y de hecho, es uno de las cosas que vamos a evaluar en el obligatorio, así que tenganlo presente y en la evaluación. Luego llegamos con Bustram, que es la herramienta que queremos tratar de ampliar un poco el día de hoy. Es una herramienta para el Fruit End, que lo hizo Twitter y se lo supo el primer vez en 2011, y tiene su propia documentación oficial en este momento. Genera muchas pasiones, es muy amado, muy odiado, más odiado, no sé, pero bueno, por lo menos se hace notar que es lo importante. ¿Qué ventaja nos va a permitir tener desarrollo rápido, que consistencia, que esto va a poder permitir visualiz. ¿Qué componente tiene soporte? Componente de texto, la tipografía y dependiendo del tipo de texto que queramos usar, vamos simplemente a definir o señalar el uso de una clase y gusta probar, enterizar de la misma forma en todos lados y se va a ver algo así. Lo mismo por acá. También tenemos el "eyado", que es el orden en el que los elementos reciben el foco y cómo se van organizando en la página. Algo que es importante tener presente es que Bustrup utiliza un sistema de grillas. Entonces, ¿qué significa? Supongamos… Dios mío, te empiedas. Aquí… Ah, perfecto, ahí está. Supongamos que esto es el lienzo de mi página. ¿Cómo tal? Entonces, ¿qué hace Gustustrap? Bustrap define filas. Y a su vez columnas, lo que nos va a dar la cuadrícula. Entonces, ¿cuántas columnas va a definir Bustrap? Va a definir 12. Sí, eso no va a suceder chico. Yo los quiero, pero hay un líquido para todo. Entonces, esta es, si se supone que… para 12, señor? Siempre, siempre el sistema es tener filas y 12 columnas, entonces básicamente lo puedes ver como que una fila siempre va a consistir de 12 columnas, entonces por ejemplo, ¿qué pasa? si yo tengo vamos a suponer que esto es una tengo, vamos a suponer que esto es una imagen. Ah, reacciona para. Vamos a suponer que esto es una imagen. Y yo quiero que esta imagen ocupe la mitad de la pantalla, si se quiere. ¿Cuántas columnas tendrías que ocupar? Exactamente. Entonces aquí, supongamos que hay hasta la secta colón. ¿Qué pasa? Que esto es un dispositivo grande, cierto? Pero puede ser que si estoy en un celular no quiero compartir espacio porque no voy a tener. Entonces, lo que yo puedo definir es que a partir de determinada dimensión, esta imagen, en vez de ocuparme seis columnas, me ocupe 12.Qué va a significar eso? Que va a ocupar toda la fila. Entonces, eso lo pueden visualizar como imagínense que abren el navegador en la vista de poder cambiar las dimensiones. Entonces, la imagen está acá y tiene un elemento al lado aquí, no sé, esto. Pero cuando empieza el modo semánticos que van a tener un significado. cierto feedback con elementos como por ejemplo la accordión que básicamente tenemos gesto y lo vamos a poder ir desplegando para mostrar información y ocultarlo. Todos estos elementos que tienen acá, la intención es que los exploren en la documentación para que vean cómo lo pueden incluir en lo que es el obligatorio. Sugerencia, vayan viendo el tema de la CAR y vayan viendo el tema de los colores primarios secundarios. Eso vean, es una sugerencia nada más. Bueno, alguna pregunta hasta acá? Bueno, estamos listos, entonces vamos al ejercicio. Qué bueno. Qué bueno. Bueno. Ah, si cualquiera tiene lo de la evolución que lo ha ferido. Sí, pero la. La humedización que hay de nuestro primero. - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? - ¿Qué es eso? ¿Qué es eso? ¿ documentación de busstra que ahí que ahí saca hablaba de eso y la la posibilidad tiene capturas de la documentación para que puedan ver si ustedes vienen a lo google solamente como solamente como docs.bustrape. Y esto a los que están en el mundo les puedo facilitarme. Entonces, si ustedes vienen acá hay un titulito de componentes y acá están cada uno de los componentes. La gracia de Gustave es que ya viene, ya está implementado, es que ustedes referencian algo que ya existe. Entonces, siempre se hace de la misma forma, tipo poder hacer que esto sea de este color celestito, que sea así, me agris o lo que sea, siempre se hace como de la misma forma. Entonces, a partir de las clases, o sea, la invocación de estas clases de CSS, es que vamos a poder llegar a estos resultados. Entonces, cuando ustedes no sepan bien cómo resolverlo con Boostrap, es simplemente venir a la documentación copiar y pegar cómo está hecho acá y adaptarlo a lo que ustedes tengan. Ah, esa es básicamente como el mayor uso que les pueden dar. Entonces, por ejemplo, con los botones para que mi botón se vea de un color de otro de otro, yo lo que voy a tener que hacer es usar esta clase que está acá. Entonces yo solamente poniendo esto, integrándolo a mi botón, es que se va a ver de esta forma. Y lo que tiene a buscar es que va a estandarizar. Entonces todo lo que sea un botón primario siempre se va a ver de la misma forma. Bueno. Y acá tienen como las distintas variantes si se quiere. Como que le van agregando acá mismo en la clase. Pero de nuevo esto ya viene definido por Bustro. Es como la gracia esto. Y después, ¿y si, ¿sabes qué les decía? Que vayan mirando cómo se hacen las Cards, que esto… Estoy casi seguro que en el ejercicio lo tenemos, pero de todas formas es importante tener obligatorios. O sea, tener obligatorio cuando hagan la parte de interfaz de usuario, no en este primero, sino en el segundo. Como de los elementos típicos que se les pide es que puedan implementar algo con una car. Entonces, como que está bueno que lo sepan y mismo en la evaluación también. Entonces, ustedes acá ya tienen como un ejemplo de cómo se implementa una car que se ve de esta forma. Y esto va a ser siempre igual. O sea, va a ser adaptado a lo que sea que ustedes vayan a hacer y acá como las distintas variables de la cauta y esto así con todos, no van revisando media que lo van necesitando pero sepan que cuando se les pide, que dan una cara, que dan cara, que hagan un carrusel, que hagan un droga, todo eso, ya lo tienes mapeado en la en la documentación de Bustl. Bueno, eso. ¿Para qué tenías que resolver con la documentación? Porque el día de la evaluación es el único recurso que vamos a tener entonces quede menos que se pierdan las oportunidades o exorbitan un problema porque se en realidad copian y pegando y no lo manipulan bien con el día ni época ni eso. Ni época ni eso. No había chances a Después. Eh, te invito a la acción uno. Todos recibieron su billú. ¿Se dieron cuenta? Bueno, al menos uno no. Eh, le llegan. La cara de concierto total. En su ron… En cada uno de los repositorios de la evaluación 1, es que no es etiqueta 3, pasamos un poco a saber si. Les dejé un hilo que se llama devolución a todos y que tiene la devolución nuevamente con la nota de esa parte. La otra cuestionaria yo ya se la sabía dicho. ¿Sepan más? ¿Acuáles se ven más o menos? Sí, claro, sí. Sí le di, ¿no? No, no. No, no. No, no. No, no. No, no. No, no. Yo le estaba la devol. - No, no. - Ay, que… - Te lo expone con las… - ¡Venos a ver que te coja! - Yo lo quiero, yo lo quiero. - ¿Qué estás diciendo, tío? - No, me confundí con los de Martín. - ¿Qué te lo expone con las? - ¡Oh, un dios con los otros! - ¡Tomem los de una mañana! - Tengo muchos grupos de cementerio. - Bueno, está. - Ah, yo y yo. - Eh, eh, eh. - Vamos a arrancar por las notas? más más duro y que me dolió fue que no terminó de pusiar o sea hubo gente que no que no pusió cosas que quedaron cosas y empuyea entonces lo que no está pusiado no lo puedo corregir porque no existe. ¿Quieres decir algo Rasmussen? Para el resto que le abrazé a Ando. ¿Quién me lo? ¿Acaso te lo? No, si, si, si, si, si, si, si, si pase en el otro? Claro, sí, como que es cada vez más grave. Ah, yo usé lo otro. O sea, esta evaluación vale muy poquito. Ah, como que no es tan grave, ¿tanto? Pero a medida que en la evaluación 2 y la evaluación 3 cada vez vale más el ejercicio. Entonces, tenga cuidado porque la gracia es que no regale nota porque sí. Que pierdan puntos porque sí, cuando los podrían asegurar. ¿No? Y hay un punto emocional que nos sale chiste. Ya le digo. Bueno, está. Eso con la… ¿Cuánto valía está? Eso es la evaluación. ¿Cierto? ¿Siete puntos? ¿Siete y cuatro? ¿Siete y cuatro? Cuatro del cuestionario y 7 el práctico es que la es que la tercera por ejemplo ya no tenga 70 bueno pero sí pusieron a llegar a decir perfecto bueno, el ejercicio. Estamos acá, estamos en material general y acá ejercicios prácticos que es donde lo sacamos siempre y el que vamos a hacer es este de acá, que dice gusto, ¿no? Entran acá y van a hacer el fork como venían haciendo para crearse la incancia de esto. Presten atención porque después no hacen… Después puede acceder, claro, aquí o no, pero aquí está bien lo que hago. La idea de esto básicamente es que puedan practicar a Busta, usar la documentación de esto y que vayan viendo como la imagen. Esto como viene no les va a funcionar la estética, lo que van a ver es como un html verado y tienen que poner, o sea, tienes a la conexión de Bustrak y ahí van a ver que se les pone como lindo, todo lo lindo que pueda estar. O menos de eso. Y después de eso, si es que tienen que empezar a dar estilos a ciertas cosas que les va diciendo acá. Ah, ese es como el ejercicio. Bueno, muy bien. Bueno, los que están remotos los llevo una salita, ¿tá? Y así pueden trabajar juntos también. Y les dejo que voy a apartar pantalla y todo eso. Ah. ¿Se ve ahí? Sí. Bien. E ¿Camporario? - Sí. - En el campo de la clase se puso acá la clase y después en el input se hizo lo mismo. Después… qué macera. - ¿Quéenían el botón de eliminar? Sí, el de eliminar se hacía en el main que acá en el se agregaba esto y bueno, quedaba… quedaba así el botón en rojo. Bien todo el div completo, o sea copié todo el div, pero había que copiar solamente este div y nada, básicamente se duplica y el cambio que tiene es que acá en el SRC le cambiaste el link por el que decía el Rhythmie y después en el alt lo que hacía es bueno, cambiabas la descripción que tenía. Bien, hay un detallito. Sí. Ahora, por verte ahí, un detallito es que viste qué tenés en el el carruzel item y en todos lo tenés como actif. Ese debería ser que solo el primero dice actif y después en los otros no. Ah, ok. Bien, eso que cambio tiene en el en el programa. El activoiva en realidad es para mostrar desde donde arranca entonces mismo acá en la en la letra dice importante la clase active indica que diapositiva se muestra el iniciar de carruzel por este motivo de estar únicamente en el primer carruzel item. Ah, tal vez ese se me pasó entonces. Y quedaría algo así la página. Ahí va. Bueno, muy bien, precioso. Ahí un comentario adicional pero de la primera parte es que les debería quedar donde ponen los eh donde conectan Bustrat eh bien arriba les debería quedar primero la conexión de Bustrat y después la referencia al CSS cosa de que tu CSS pueda rescringir cosas de Bustrat. Ahí va. Ah. Porque con esto se le de arriba para abajo, primero carga Bustra y después eh carga tu CSS. Entonces, si vos reescribís algo, te lo toma, pues, sino lo que va a pasar es que siempre te lo vas a, siempre te queda eh pisado por Bustra básicamente. Ah. Eh bueno, muy bien. Muy amables, ambos. ¿Alguna duda que ya ha quedado? Bueno, espectacular. Muy amables. Bueno, todo tuyo. Ya es la obra. Bueno, tenemos que hablar. Bueno, vamos a hacer un pequeño feedback.