Encuentro 5_ADSO FICHA 2758305 y 2758306 Fase 3 EJECUCIÓN 2024_06_20
Category
📚
AprendizajeTranscripción
00:00Bueno, ¿qué es lo que nosotros vamos a ver el día de hoy, muchachos?
00:10La guía 6, ya en A4, ya finalizando, a nosotros nos está solicitando generar la plantilla
00:20y los estilos ¿de qué? del proyecto que ya ustedes están creando, ¿listo?
00:28Lo que ustedes plasmaron en el MOOCAP, ya lo tienen que hacer acá, ¿listo?
00:37Entonces, CSS puro es bastante complicado y pues el tiempo a veces no les va a dar para
00:45aprenderlo ¿listo?
00:48Lo primero que ustedes tienen que hacer es instalar Sublime, si no es Sublime, que sea
00:53cualquier editor de texto, ustedes pueden crear páginas hasta con texto plano, pero
00:58suele ser muy, muy complicado, ¿listo?
01:04Entonces yo les recomiendo Sublime, ¿vale?
01:07Entonces, si ustedes ingresan acá a Sublime, simplemente escriben Sublime, aquí estaría
01:19como tal la información y ustedes lo pueden descargar, ¿listo?
01:25Entonces aquí, si ustedes miran, aquí está para Windows, para Mac, para Linux, simplemente
01:33tienen que darle al botoncito de descargar, dice descargar para Windows y si nosotros
01:40miramos acá, cuando descargamos, acá está nuestro archivo de Sublime, ¿listo?
01:49Entonces simplemente le dan doble clic a esto y le dan siguiente, siguiente, siguiente
01:58hasta que se instale, ¿qué van a obtener?
02:01Van a obtener esta herramienta, así como esta ustedes la van a tener, entonces, cuando
02:08uno instala Sublime, ¿qué le toca hacer?
02:13Colocar el Package Control y aquí, pues, en el Package Control, cuando ustedes lo instalan,
02:19ya ustedes empiezan a colocar plugins, ¿cuál es la diferencia, en qué le pueden colaborar
02:26los plugins?
02:28En escribir código mucho más rápido, ¿listo?
02:32Entonces hay dos formas, nosotros vamos a crear, hay dos formas de crear archivos, ¿listo?
02:40La primera, se crea una carpeta y esta carpeta, pues, la voy a llamar HTML clase, voy a arrastrarla
02:52a Sublime y ya tengo una carpeta acá en Sublime con esa información, ¿listo?
02:59Dentro de esa carpeta, como ya está vinculada a Sublime, todo lo que yo haga dentro de esa
03:03carpeta se va a ver reflejado.
03:05Entonces, ¿qué necesitarían ustedes para trabajar?
03:10Archivos CSS, voy a crear una carpeta CSS, ahí se colocan todos los archivos CSS, archivos
03:17JS, ahí se pueden colocar todos los archivos JS y le voy a decir Imagen, ahí vamos a guardar
03:26todas nuestras imágenes, ¿listo?
03:28Como para ir teniendo una organización.
03:31Lo primero que nosotros tenemos que crear es un archivo, tenemos que llamar index.html,
03:42todas las páginas tienen que llevar HTML, ¿listo?
03:47En este momento, bueno, hay otras que llevan otra extensión, pero ahorita no se compliquen
03:52y que todos tengan HTML, ¿listo?
03:55Miren la diferencia, aquí cuando me dicen archivo de texto, cuando yo le digo HTML,
04:03y miren que ya él me lo quiere leer con un navegador, y acá pues me coloca la información.
04:10Si yo lo abro con un navegador, el navegador está, ya es una página web, pero no tiene
04:16absolutamente nada, está vacía, ¿listo?
04:21La estructura de una página web es HTML, entonces acá nosotros tenemos que cambiar
04:29el tipo de archivo que queremos crear, aquí en la parte de abajo nos dice que podemos
04:36crear un archivo plano, pero yo quiero una HTML, por lo tanto tengo que darle clic ahí
04:41para que me muestre archivos HTML, le doy clic y busco HTML, ¿listo?
04:49Hay plugins que yo les voy a recomendar, ¿por qué?
04:53Porque con pocas líneas nos crea a nosotros una estructura, por ejemplo, si yo le digo
04:58HTML 2.5, miren que ya él me muestra la estructura, si yo le doy tap, él me crea la estructura
05:07de una página web, esta es la estructura de una web, sí o sí, ¿listo?
05:14Entonces ¿qué es lo que hay aquí?
05:15Yo se los había explicado, esto es para el navegador, para decirle que es HTML 5,
05:20este HTML pues es lo que va a envolver toda mi página, acá cierra, en este gead está
05:27todo lo que va a ser para el navegador y en el body todo lo que va a ver el usuario, ¿listo?
05:33Si yo quiero, en este caso, va a ser de esta forma lo que voy a necesitar, mi mocap va
05:48a solicitar en la parte de arriba de mi página, aquí quiero un logo y aquí quiero un título,
06:00¿listo?
06:02Esto lo puedo hacer con CSS, o sea, primero hago la estructura en HTML, entonces voy a
06:08decirle que necesito dos div, ¿listo?
06:16En el primero va a ir como tal mi logo, entonces hay una etiqueta que se llama IMG y aquí
06:30vamos a ponerlo así, IMG y aquí va a colocar nuestra información.
06:42Bueno, en este caso no voy a seguir trabajando con este índice que está acá, voy a moverlo
06:51un poquito, voy a copiar esto y se lo voy a llevar al índice que ya había creado con
06:56anterioridad, ¿listo?
06:57Y lo voy a pegar acá, vamos a borrar esto por ahora, ¿listo?
07:02Entonces acá ya tengo IMG, él me está diciendo que dentro de la carpeta imagen está una
07:07que se llama, no sé, no tengo imágenes ahí, entonces voy a buscar una imagen, ah sí,
07:16tengo una imagen, no tengo imagen, entonces vamos a buscar una imagen y la vamos a llevar
07:22ahí.
07:23¿Listo?
07:24Voy a descargar una imagen que necesito para poder trabajar.
07:28Entonces voy a buscar una imagen, un logo del Sena, listo, abro el loguito, lo descargo,
07:49voy a guardar mi imagen, la voy a guardar en clase, en imágenes y listo, ahí está,
07:58ya quedó guardada, entonces ya aquí tengo que, ya él tiene que ayudarme a reconocerla,
08:04yo escribo logo, ahí está mi imagen, logo Sena.
08:07Si yo le doy control, es esta sencilla línea que ustedes ven aquí, carga la imagen, ¿listo?
08:12Entonces en este div la voy a llamar tecnología Apso, ¿listo?
08:25Vamos a ver, Senaxo, entonces vamos a decirle control S y vamos a, ya con esto, ya mi página
08:42debería tener información, si yo actualizo, ya tiene el logo, pero en la parte de abajo
08:48ya también tiene Senaxo, entonces empezar a modificar esto con solo CSS suele ser muy
08:55tedioso.
08:56Ahí es donde yo les voy a recomendar una herramienta que se llama Bootstrap, ¿sí?
09:01Bootstrap ya está creada, ya está configurada, para descargarlo también es muy sencillo,
09:07entonces por ejemplo, acá dice descarga de Bootstrap, entonces yo puedo descargar los
09:12archivos, acá le puedo decir que quiero descargarlos sin ningún problema, o él me dice cómo
09:20los puedo utilizar, acá me dice que también puedo utilizar archivos CSS y archivos JS,
09:27¿listo?
09:28Entonces, si yo copio acá, él me permite pegar esa información que ya tengo, control
09:36V, algo que ustedes deben de saber es que los links van en la cabecera, ¿listo?
09:44Entonces si yo presiono control shift y la flecha hacia arriba, él me permite mover
09:49la información a la cabecera, ¿dónde queda la cabecera?
09:53Que quede la información dentro del gead, ¿listo?
09:57Ahí con eso ya tengo Bootstrap, y el script debe ir antes de que se cierre el body, ¿listo?
10:08Ahí ya estaría mi información, si yo control S, guardo, actualizo, miren que no ha pasado
10:17nada porque no he empezado a utilizarlos, pero si yo voy a Bootstrap y miro la información
10:24de Bootstrap, entonces por ejemplo, los botones, yo quiero botones, Button, acá están mis
10:32botones, miren todos los botones y variedad de colores que nos ofrece Bootstrap, entonces
10:37voy a copiar esto y lo voy a pegar en mi página, lo voy a pegar en la parte de abajo, he pegado
10:46todos esos botones y esos botones se ven como están, los muestra Bootstrap, ya está
10:52funcionando, miren que ya está cargando Bootstrap, en este caso, este Bootstrap lo está cargando
11:00web, ¿listo?
11:01Solo podemos cargar local, también no hay ningún problema, si esto no estuviera, yo
11:06le digo control S, y no me está cargando Bootstrap, los botones se verían totalmente
11:11diferentes, miren como se ven los botones en este caso, ¿listo?
11:14Entonces, a mí me parece que es bastante interesante poder utilizar Bootstrap, ¿vale?
11:21Otra cosa, entonces cuando yo estoy utilizando Bootstrap, Bootstrap en sí me permite entonces
11:31empezar a configurar, ¿listo?
11:33Entonces están lo que son los contenedores, ¿para qué son los contenedores?
11:38Para poder separar mi, digamos, mi información de las esquinas, ¿listo?
11:46¿Qué más encontramos nosotros acá?
11:50Entonces, necesito un container, aquí está, digamos, mi container, voy a copiar esto
12:06y lo voy a llevar acá, ¿listo?
12:10Voy a darle tab, control V, y con esto pues ya estaría, ¿listo?
12:16Dentro voy a colocar la misma información, y verán para qué se utilizan los containers,
12:22los containers me permiten separar la información de las esquinas laterales, ¿ok?
12:34Voy a guardar esto que está acá, lo estoy repitiendo, ¿listo?
12:38Estoy repitiendo la misma información, la misma imagen y el mismo título, la única
12:44diferencia es que uno está dentro del container y el otro está fuera del container, ¿ok?
12:51Y miren lo que hace Bootstrap, simplemente aleja la imagen y el título de las esquinas,
13:00entonces esto es bastante útil para que no quede pues totalmente pegado ahí, ¿listo?
13:07Ahora entonces ya tengo mi información, ya se lo puedo borrar, entonces algo importante
13:14es que Bootstrap tiene una clase que se llama Poll, ¿ok?
13:22Esta clase lo que nos permite a nosotros es dividir la información, entonces Bootstrap
13:29trabaja con 12 columnas, 1, 2, 3, entonces yo le puedo decir si quiero de acá 4, 4
13:37columnas unidas, acá le puedo decir que quiero 8, le puedo decir que las quiero todas por
13:42separado, bueno, pero él trabaja con 12 columnas de esa forma, ¿listo?
13:48Entonces si yo no le digo a él, por ejemplo en este caso si le digo clase Poll, no le
13:55digo a él que digamos que quiero dividir las clases, digo quiero dividir las columnas,
14:02él me las divide a la mitad, ¿listo?
14:05Si le doy control S, él divide la información.
14:07Bueno, antes de esto me hizo falta una pequeña cosita, la fila, en este momento yo estoy
14:24usando la columna, pero él también me pide una fila, ¿listo?
14:30Acá en el grid él me dice que necesito una fila, que es un div que va a contener todas
14:38las columnas que van a estar dentro de esa fila, entonces yo lo voy a pegar acá y lo
14:48voy a cerrar en la parte de abajo, ¿listo?
14:58Y lo que está adentro lo voy a mover hacia un ladito, ¿vale?
15:04Ahora sí ya tengo mi información, ya puedo dividir y ya puedo actualizar.
15:10Mire que ya él me está colocando el título en la parte de arriba, bueno, toda esa información,
15:15ya yo lo puedo mover, lo puedo subir, entonces Bootstrap nos empieza a dar variedad de cosas,
15:22nos dice cómo van los títulos, cómo van las imágenes, el que tenga problemas con el
15:28idioma, pues yo siempre les digo pueden traducir toda la página sin ningún problema, ¿sí?
15:35Siempre les recomiendo que traten de empezar a trabajar con ellas, con las páginas en
15:40inglés para que se acostumbren al inglés técnico, entonces no se van a volver bilingües
15:47porque no van a pronunciar, pero sí van a aprender a leer en inglés, ¿sí?
15:52Y a escribir en inglés varias cosas, entonces eso es bastante, bastante útil.
15:57Y ahora esto no quiere volver a su página normal, ¿listo?
16:06Entonces pues nosotros acá, por ejemplo, Bootstrap nos dice cómo hemos de cargar una
16:10imagen, por ejemplo en este caso una imagen de 20x20, ¿sí?
16:16Aquí nos da varias opciones, entonces por ejemplo yo puedo utilizar esta imagen que
16:20está acá, la copio y vengo y reemplazo la que yo tengo acá, ¿sí?
16:30Entonces ya yo no tengo que preocuparme por el tamaño, solamente debo de darle la ruta
16:36y ¿cuál es la ruta?
16:37¿Dónde va la ruta?
16:38Él me está diciendo que la ruta va a ir acá, en el CRC, siempre van a ir como tal
16:45las imágenes y puedo borrar lo que está en la parte de arriba, ¿sí?
16:51El axo yo puedo utilizar tranquilamente un título, entonces por ejemplo yo le puedo
16:57decir que quiero un H1 y al final pues también cierro mi H1 y ahí voy modificando la información
17:09como la necesito.
17:10Entonces como les digo, Bootstrap va a hacer su solución por este momento, debería de
17:15ser así de sencillo para ustedes, un segundito que no me está cargando acá, aquí fue donde
17:27me equivoqué, ¿listo?
17:32Porque cambié la información donde no era, porque yo les dije que era en el CRC donde
17:41va la información, ¿listo?
17:43Esto ya lo podemos borrar y ahora sí vamos a colocarle acá el H, ¿listo?
17:50Entonces como les digo el tiempo no nos va a dar para nosotros, para yo enseñarles
17:55a programar, pero si los voy a orientar y todo el que me pida información de dónde
18:00está para que ustedes puedan programar y necesiten colocar información como tal, yo
18:08con el mayor de los gustos les voy a decir qué tienen que hacer, dónde lo tienen que
18:13hacer, entonces miren que acá ya está, cambió el axo, ya yo puedo empezar a subir y a bajarlo,
18:19a llevarlo a una esquina, entonces ya depende de lo que yo pueda hacer como tal, ¿listo?
18:29Boostrap realmente es muy sencillo de trabajar, entonces como les digo, va a ser la mejor
18:37solución para ustedes, ¿por qué?
18:39Porque ya ustedes tienen que empezar a construir el front end de su página, acá cuáles son
18:45las evidencias que tienen que entregar, fundamentos de implementación de las competencias, bueno,
18:52esto pues es como tal un documento escrito con esa información, pero ya tienen que entregar
19:02archivos con formato HTML, ¿cuáles son los archivos con formato HTML?
19:08Los que yo les acabo de mostrar, estos son los archivos con formato HTML, si yo lo abro
19:14tiene que tener estructura de un documento HTML, ¿listo?
19:18Tiene que tener por lo mínimo una cabeza y en el cuerpo debe haber información, que
19:25si yo le doy doble clic, el navegador me lo tiene que abrir, ¿listo?
19:29Tienen que colocar CSS, pero implementando Boostrap no van a tener ningún problema,
19:35JS pues más adelante lo van a ver, ¿listo?
19:39En este van a establecer los componentes del front end aplicados en la web, también
19:45ustedes acá tienen que empezar a colocar, digamos acá dicen que tienen que colocar
19:51una portada, una introducción, unos adjetivos, definición de los elementos a utilizar, ¿listo?
19:58Entonces este es como describir la cantidad de elementos que ustedes van a utilizar, ¿sí?
20:04Entonces eso es bastante sencillo poder hacerlo, ¿vale?
20:09Entonces ahí ustedes van mirando qué es lo que ya toca entregar, pero ya ustedes saben
20:14cómo hacer un archivo HTML, un archivo CSS y cómo van a empezar a diseñar el front
20:19end, ¿listo?
20:21Van a necesitar mucho, mucho esfuerzo para realmente comprender este tema, yo siempre
20:28les he dicho que no se aparten de la página W3school, es bastante intuitivo y acá les
20:35explica todo lo que ustedes necesitan de HTML, si los documentos que el Sena les entrega
20:40ustedes sienten que de pronto no están completos, ¿listo?
20:45Si les faltó algo, entonces ahí está, igual yo siempre voy a estar ahí para apoyarlos,
20:50para lo que necesiten, los lunes ustedes llegan, profe, mire, tengo este código, necesito
20:56hacer esto, pues probamos, realmente los lunes es para eso, para probar y tratar de pulir
21:03su proyecto como tal, ¿listo?
21:06Entonces siempre los voy a estar esperando los lunes a la misma hora, de 7 a 9, a cualquier
21:11hora se pueden conectar, ¿sí?
21:14No hay ningún problema, dudas, preguntas, inquietudes, hasta ahí.
21:21Ya esta semana, mañana afortunadamente tengo el día completico para empezar a calificar
21:26las actividades a ustedes, ya lo tengo dentro de mi programación, ya están ustedes ahí,
21:33son los que siguen, ¿sí?
21:35Aquí calificar las fichas, 0506 y 803, y luego voy a publicar mis videos de ensayunar,
21:44pues como se pueden dar cuenta yo siempre llevo una agendita, entonces ya casi termino
21:49con todo, ¿vale?
21:51Dudas, preguntas, inquietudes, muchachos, señorita Ginette, que siempre estás por
21:56ahí.
21:58Gracias, profe.
22:00No, yo he subido todos los trabajos, no sé cómo los tengo, o sea, cómo me hayan quedado.
22:06No te preocupes, igual ahorita los calificamos y cualquier cosa pues yo les comento, ya
22:11nosotros si me deja, ¿cómo les digo?
22:14Me deja dejarles los comentarios, entonces yo siempre trato de dejarles el comentario
22:19lo más claro posible, si no, me escriben al grupo, profe, el comentario pues no sé,
22:26me lo podría explicar mejor, yo les dejo ahí más o menos que eso, o les dejo un audio,
22:31pero por favor, todo por el grupo, porque hay preguntas que digamos me la hace Pepito
22:38y me la va a hacer Juanito, entonces mejor contesto por el grupo, ya le contesto a Pepito
22:42y Juanito, pues de una vez ve que la pregunta que va a hacer ya está, ya la está resolviendo.
22:48Se me va a entender y con eso pues podemos avanzar más, ¿vale muchachos?
22:53Pues con eso pues sería todo para el A4, espero buenos proyectos de ustedes, muchachos,
23:02vamos con toda la actitud y siempre que necesiten algo, me avisan, yo trato de publicarles mucho
23:10en, o sea, todo lo que me solicitan, trato de publicárselos en Telegram, ¿listo?
23:16Entonces ahorita les voy a dejar un documento también para que les ayude con eso, ¿vale?
23:23¿Listo? Vale, gracias profe, buenas noches. Bueno,
23:27no siendo más, te deseo feliz noche. Gracias, igual.