Etiquetas muy chulas en Moodle | Mediateca de EducaMadrid

Vale, entonces aquí os he puesto, veis esto es lo que os decía, el vídeo este no se borró y entonces no funciona, el enlace está roto. 00:00:00

Bueno, pues os cuento. A ver, el asunto este, el asunto de las etiquetas, bueno era, me hicisteis de poner etiquetitas, ¿vale? 00:00:12

Aquí os he puesto una colección. Bueno, estas son etiquetas de momento muy lisas para ir hablando de cosas, pero son etiquetas con marquitos, con colorines, con degradados, con mucha monería. 00:00:22

¿Vale? Entonces, para hacer este tipo de cosas, pues incluso cosas mucho más sencillas, al final hay que meterse un poco con lenguaje HTML, ¿vale? Pero lo que os voy a contar no os asustéis, que lo que os voy a contar es súper sencillo. 00:00:35

y yo. Entonces, a ver, vamos a empezar por aquí. Cuando le dais a, vamos a ver, cuando 00:00:52

edita, ¿eh? A ver, ¿por qué no me deja? ¿Dónde estoy? Ah, se está pinchando en activar 00:01:03

edición. Vale. Ahora. Vale. Bien. Hola. Hola. Hola, Raúl. Hola. Vale, entonces. Bueno, voy a ir, o sea, lo que había pensado era, os he escrito aquí unas cosas que os pueden servir así como un poco de teoría, o sea, aprovecho la propia etiqueta para poner cosas de teoría y a la vez vamos viendo cómo van quedando en el lenguaje HTML y os voy contando, ¿vale? 00:01:16

Aquí os he puesto un enlace de donde yo he sacado todo lo que sé de HTML, que nunca me ha enseñado nadie nada, que esto es de trastear y de bichear, ¿vale? Entonces, luego os la enseño en su momento, pero la dejo de principio para que la tengáis ahí accesible, ¿vale? 00:01:56

Entonces, al editar los ajustes, os sale el editor que todos conocéis cuando habéis editado algo y me imagino que sabéis, y si no ya os lo voy contando, que aquí os sale una opción de mostrar más cosas y lo que vamos a manejar está sobre todo en esta fila que suele venir oculto. 00:02:12

Cuando le dais al corchete este, es donde se ve el lenguaje HTML, que sale con codiguitos y tal, que al principio asusta mucho, pero al final es algo relativamente, por lo menos tiene una lógica bastante fácil de seguir. 00:02:44

¿Vale? Esto de aquí sirve para poner la pantalla completa. Yo os lo recomiendo cuando vais a trabajar porque si no hay en la ventanita esa pequeña, pues eso es un error. ¿Vale? Entonces, lo que os he puesto en esta etiqueta es un poco como, al final lo que más yo creo que vais a hacer es coger las etiquetas que están por ahí, que os he puesto medio ejemplo, y copiarlas. ¿Vale? 00:03:03

Pues para copiar una etiqueta 00:03:27

Lo que tenéis que hacer es copiarla 00:03:29

Desde el lenguaje HTML 00:03:31

Porque tiene que ir con todos sus códigos y todas sus cosas 00:03:32

O sea, si yo ahora mismo le doy aquí 00:03:35

A cortar y pegar, cuando yo esto lo pego 00:03:37

No me pega nada de lo que hay aquí 00:03:39

O sea, me pega texto 00:03:41

Me pega texto limpio 00:03:43

Sin formato y sin nada 00:03:45

Y encima como le da la gana 00:03:47

¿Vale? Entonces, para copiar 00:03:49

La etiqueta, os vais aquí 00:03:51

Marcáis todo 00:03:53

La forma fácil de marcar todo es con 00:03:55

control A, A de all 00:03:57

en inglés, ¿vale? 00:03:59

control A, veis que se marca todo 00:04:01

control C, ¿no? 00:04:03

control C 00:04:05

control C 00:04:06

lo vais a 00:04:08

usar en el Word 00:04:11

y en programas que estén traducidos 00:04:13

pero cuando 00:04:15

vayáis a algún programa 00:04:16

que no funcione el control C, probad 00:04:19

con control A, porque en la actitud del mundo 00:04:21

es control A 00:04:23

es que además te ahorras 00:04:24

tener que seleccionarlo. 00:04:26

Con control A, todo lo que está 00:04:28

en el cuadro se selecciona. 00:04:30

No tienes que estar arrasando el ratón. 00:04:31

Das control A, ¿vale? 00:04:34

No, pero control A, 00:04:36

perdona, Raúl, te lo he dicho mal. 00:04:38

Control A sustituye al control E 00:04:39

del Word. O sea, si tú estás en un documento 00:04:42

de Word y pones control E, 00:04:43

te selecciona 00:04:46

todo el texto. 00:04:48

Control A sustituye al control E. 00:04:49

Control C sí. Una vez que lo tengo seleccionado, 00:04:52

control C, porque en español 00:04:54

copiar y en inglés es copy 00:04:56

entonces sigue funcionando 00:04:57

y ya te la llevas donde quieras 00:04:59

para que lo veáis si queréis 00:05:02

pues me voy a abrir un curso que tengo yo 00:05:03

aquí de prueba 00:05:06

espérate que así trabajo 00:05:07

con dos ventanas 00:05:10

ah por cierto 00:05:11

me había hecho unos 00:05:13

me había apuntado unas cosas que os quería decir 00:05:14

antes de entrar aquí se me ha olvidado 00:05:18

luego si da tiempo 00:05:23

entonces esperar que me abra aquí 00:05:24

mi aula virtual 00:05:26

tengo creado un curso de prueba 00:05:28

donde me voy guardando formatos 00:05:31

etiquetas y guarrerías de esas 00:05:34

y entonces pues 00:05:35

para que veáis 00:05:37

será que va lentita 00:05:38

ya 00:05:45

oye te voy a robar esta etiqueta que te ha quedado muy bien 00:05:49

ya sabes 00:05:54

Pues vale 00:05:56

Este curso aquí se me aprueba 00:06:01

Ah por cierto 00:06:02

Una de las cosas que os quería contar 00:06:05

Es que aquí a la izquierda 00:06:07

Me parece que lo comenté con alguien 00:06:09

Aquí a la izquierda te salen mis cursos 00:06:12

Salen tus cursos 00:06:13

Que en general no salen 00:06:15

No salen porque los tenéis caducados 00:06:16

Porque se cerraron 00:06:19

Están puesto fecha de cierre a septiembre del año pasado 00:06:20

Y no lo habéis ampliado la fecha este año 00:06:23

Por eso no salen 00:06:24

Pero es tan simple como irse al formato de curso, cambiar la fecha y ya tenéis ahí todos vuestros cursos disponibles, ¿vale? Vale, pues me voy al curso de prueba, ya la tengo aquí entonces. Consejos, por ejemplo, si yo me voy a copiar una etiqueta, lo primero que tengo que hacer es generar una etiqueta y luego pego ya todo el texto. 00:06:25

Os recomiendo una cosa, que otra etiqueta que ya tengáis hecha, ¿vale? Yo, por ejemplo, me voy a poner la última que tengo, ¿vale? Lo voy a poner aquí abajo, ¿vale? Pues, por ejemplo, detrás de esta, ¿vale? 00:06:48

Entonces, ¿qué hago? Para no irme a añadir, o sea, todo el menú del aula virtual, de añadir las esas, que es un poco goñazo, y además luego te lo genera siempre abajo del todo, entonces luego la tienes que subir para ponerla en su sitio, ¿vale? 00:07:01

Pues si yo la quiero poner aquí y tengo una etiqueta cerca, lo que hago es duplicar esta, ¿vale? Entonces, duplico, ¿vale? Y ya tengo otra ficha generada. Además, yo, por ejemplo, veis que aquí no me sale el cuadrito de marcar, el cuadrito de actividad realizada, porque las etiquetas normalmente, como no tienen nada que realizar, yo en las, al editar, a ver si sale, vale, al editar aquí en finalización de la actividad, 00:07:19

normalmente tengo puesto 00:07:51

¿vale? 00:07:53

normalmente tengo puesto 00:07:55

no indicar finalización de la actividad 00:07:57

o sea, aquí se puede elegir 00:07:59

que la indique manualmente el estudiante 00:08:00

o que no se indique finalización 00:08:03

yo para las etiquetas en las que no hay que hacer 00:08:05

nada, que suelen ser todas, ¿vale? 00:08:07

pongo no indicar finalización de actividad 00:08:09

y así nos sale el cuadradito donde el alumno 00:08:11

marca y tal, ¿vale? y queda más limpita 00:08:13

la página y más bonita 00:08:15

bien, ya la tengo aquí, entonces lo que os decía 00:08:16

O sea, esta etiqueta no vale para nada porque simplemente es una copia para que me copie el formato de la etiqueta mucho más rápidamente que yendo a insertar actividad no sé qué y tal, ¿vale? 00:08:19

Y ¿qué tengo que hacer? Donde está el código HTML de esta, tengo que hacer el control C que ahora mismo tengo en el portapapeles, ¿vale? 00:08:30

Entonces me abro el HTML, ¿vale? Entonces como quiero borrar todo esto, controla, habíamos dicho, ¿no? 00:08:38

No hace falta ni que borre, porque si yo ahora le doy control V, que es pegar, ¿vale? Ya me ha pegado encima de la otra, ¿sabéis qué sencillo? Y entonces ya tengo la etiqueta y además ya la tengo con el formato que yo quiero, porque como me mantiene las restricciones de acceso todo lo que yo ya he hecho, pues lo tengo formateado y todo, ¿vale? 00:08:47

Le doy a guardar y mostrar y ya está ahí abajo, ¿vale? La etiqueta que ponía todo el chorizo ese que había escrito, un momento, ¿dónde estaba? Aquí, ¿vale? Mi biblia de HTML, lo que estaba puesto, ¿ok? 00:09:06

vale, entonces aquí lo que os tengo 00:09:25

puesto en esta etiqueta precisamente es que 00:09:28

para copiar una etiqueta, copiar 00:09:30

y pegar el código HTML, le dais 00:09:32

a, bueno, me habéis seguido, no 00:09:34

hace falta que lo repaséis, vale 00:09:36

conviene que le deis a ampliar para que 00:09:37

se vea bien y el truquito que os he dicho mejor 00:09:40

duplicar una etiqueta y para marcar 00:09:42

todo controlado, o sea que 00:09:44

no te preocupes escribiendo 00:09:45

todas las 00:09:48

cosas que más o menos son así útiles 00:09:50

vale, bien 00:09:52

entonces... Yago, perdona, yo me he incorporado 00:09:54

tarde, lo mismo lo has dicho 00:09:56

y no estaba yo ahí 00:09:58

y lo mismo cometo un error 00:10:00

pero si queremos modificar luego 00:10:02

esa etiqueta, es decir, nosotros la copiamos 00:10:04

de momento estoy diciendo cómo pegarla 00:10:06

vale, ahora 00:10:08

para modificarla hay que 00:10:09

tocarle las tripas del HTML 00:10:12

que es un poco lo que vamos a ir ahora 00:10:14

poco a poco, ¿vale? Entonces, esta etiqueta 00:10:16

es un poquito más compleja 00:10:18

y tenía preparadas la siguiente 00:10:20

es más sencilla, para salir de aquí 00:10:22

cuando lo tenéis esto ampliado 00:10:25

no podéis darle a guardar 00:10:26

o sea, tenéis que quitar 00:10:29

la pantalla completa 00:10:29

y darle aquí a guardar cambios 00:10:32

o a cancelar 00:10:34

entonces esta etiqueta es un poco más sofisticada 00:10:35

y te lo apuche la primera para que 00:10:41

tuvierais aquí los 00:10:42

como dicen los ingleses 00:10:43

los 00:10:47

highlight 00:10:47

eso 00:10:49

Highlights, ¿no? 00:10:51

Lo importante 00:10:55

Vale, entonces aquí tengo una etiqueta 00:10:55

Que veis que es muy fea porque no tiene ni colores 00:10:59

Ni nada, pero aquí os voy 00:11:01

A contar, entonces bueno, primero leo un poco 00:11:03

¿Vale? Entonces esta es una etiqueta que vamos a utilizar 00:11:04

Para hablar de posibles formas de 00:11:07

Separar 00:11:09

Cosas dentro de etiquetas, sabéis que aquí hay 00:11:09

Un sangradito 00:11:12

Luego ya le ponemos 00:11:13

Colores y le ponemos cosas 00:11:18

¿Sí? 00:11:21

Vale. Entonces, una cosa importante. En HTML todo es texto corrido. Entonces, si yo cambio, por ejemplo, si yo ahora hago un zoom, ¿vale? Que estoy cambiando el tamaño de la pantalla, veis que el texto se adapta a la ventana. 00:11:22

Es decir, en principio solo hay cambios de línea donde yo quiero empezar con un nuevo párrafo, que en este caso sería aquí, aquí, y eso también lo tenéis que pensar. 00:11:40

O sea, a la hora de diseñar una etiqueta, tenéis que pensar que un alumno lo ve en un móvil, en una pantallita así, otro lo ve en súper ancho, ¿vale? Entonces tenéis que tener en cuenta que el código, o sea, lo digo a lo mejor, hacéis una figurita súper mona y decís, no, esto queda así centradito y tal, ya, pero en cuanto cambies el tamaño de la pantalla se va todo a tomar por saco. 00:11:57

entonces con eso, eso es una 00:12:16

cosa con la que tenéis que tener en cuenta que no podéis 00:12:17

jugar, ¿vale? veis aquí por ejemplo que ha agrandado 00:12:19

tanto que esto ya no queda 00:12:21

como antes así en una línea 00:12:23

¿vale? bien 00:12:25

voy a poner esto en un tamaño más 00:12:27

razonable 00:12:29

hay que hacerlo responsive 00:12:30

que es lo que el programa daría 00:12:33

que sirve 00:12:34

para las pantallas de los móviles 00:12:39

y para las del ordenador 00:12:41

ay mira, ahora que lo has dicho se me ha olvidado 00:12:42

porque una cosa que os iba a enseñar es 00:12:45

que te pones encima de una letra 00:12:46

y en el ratón te salen cositas. 00:12:48

¿Te salen? 00:12:52

Te salen cosas, comentarios. 00:12:54

Yo una vez les puse un ejercicio 00:12:55

donde les decía, 00:12:57

era un ejercicio que era un poco difícil, 00:12:59

y les decía, si no te sale, 00:13:00

pasa el cursor por aquí y tienes una pista. 00:13:03

Y si pasas por aquí, tienes la segunda 00:13:05

y si pasas por aquí, la tercera. 00:13:07

Entonces las pistas salían al pasar el cursor 00:13:08

por encima nada más. 00:13:11

¡Qué chulo! 00:13:11

Os enseño cómo se hace eso. 00:13:13

Vale, guay. 00:13:15

Entonces, estaba diciendo que en HTML todo esto va corrido, ¿vale? 00:13:16

Y se ata a la ventana hasta que haya algún código de separación. 00:13:24

Entonces, hay como cuatro o cinco maneras de separar cosas, ¿vale? 00:13:27

Que es lo primero que vamos a ver. 00:13:31

Entonces, una línea nueva, o sea, aquí esto está todo escrito, escrito, escrito, hasta aquí. 00:13:33

Y al final aquí hay un código HTML que es este que tiene aquí, PR, que es break, ¿vale? 00:13:38

Que es un cambio de línea. Lo edito, ¿vale? Bueno, voy a leer un poco, ¿vale? Porque luego... Bueno, no, estoy pensando, no, porque lo puedo leer en el otro sitio, puedo leer también, no, espera, aquí. Venga, lo edito, ¿vale? Vale, entonces la voy a poner en grande para que se vea bien, ¿vale? Venga, termina de salir. Si algo no me seguís, me decís, ¿eh? 00:13:42

Vale, pues eso, ¿vale? Pues aquí, o sea, estoy en el editor, pero no es el editor, o sea, el editor es como doble, ¿vale? Este es el editor de texto y le puedes dar formato y tal y luego está el editor de HTML que es pinchando aquí, ¿de acuerdo? 00:14:10

Entonces, para que veáis, ¿vale? Entonces, está, ¿vale? Esta etiqueta para hablar de, entonces, aquí ya sale un código raro, claro, este código, ¿a qué corresponde? Este código corresponde a una división que he tenido que hacer aquí para decirle que esto va en color rojo. 00:14:26

os compliquéis la vida, quiero decir que esto es 00:14:43

subrayar y os podéis ir aquí 00:14:47

al color rojo, ¿vale? 00:14:49

y lo ponéis en rojo chimpún 00:14:51

pero que sepáis que todo eso luego 00:14:52

lo que os genera, ¿vale? 00:14:55

entonces 00:14:57

vale, luego os digo 00:14:58

este código de aquí, voy a donde estaba 00:15:00

ahora mismo, ¿vale? entonces estaba 00:15:02

veis que aquí está un PR, ¿no? 00:15:04

además, esto facilita mucho 00:15:06

las cosas porque los códigos, como veis 00:15:08

van todos en verde, ¿vale? 00:15:10

Entonces son muy facilitos de encontrar, ¿de acuerdo? El BR este que yo os he puesto aquí, este, no sale. ¿Por qué no sale? Porque esto es BR texto, no BR código. Para que HTML sepa que esto no es un break, sino que es texto, lo mete con unos simbolitos ahí indescriptibles que no falta ni aprenderse ni nada, porque eso lo escribes aquí. 00:15:12

O sea, yo esto lo escribo con el teclado normal, tal, pongo tal, carita, no sé qué, ¿vale? Y esto, él solo hace la traducción. ¿Cuál es la traducción? Pues la traducción es, ¿vale? Esto es su, hasta que haya algún código de separación, ¿vale? Pues esto de aquí, pues son de este de aquí, es este de aquí para hacer eso, ¿vale? 00:15:37

Veis que aquí sí que está el BR, ¿vale? Pero este es el código del angulito por la izquierda, o sea, del menor que y este es el del mayor que, ¿vale? Pero bueno, la parte importante, ¿vale? La parte importante es que aquí tenemos un BR, ¿vale? Y este BR sí que lo vais a tener que meter a mano muchas veces porque cuando hacéis cosas, o sea, cuando estáis haciendo una etiqueta y la tenéis ahí en tal y tal y queréis que siga con el mismo formato haciendo otra cosa o tal, al darle al intro, esto se inventa cosas. 00:16:00

O sea, esto decide qué tú quieres hacer no sé qué. O sea, se coge todo lo que llevas hecho hasta ahora y dice, ah, pues, lo voy a repetir. Y entonces te repite lo mismo o al revés. Entonces, muchas veces es más fácil abrir la HTML, es decir, quiero aquí, pongo un BR a mano y me dejo de complicaciones, ¿vale? 00:16:30

Bien, pues una forma de hacer divisiones, ¿vale? Ahí con el BR. Otra forma es este código que pone aquí, que pone DIP. En general, todos los códigos empiezan y terminan. Siempre empiezan, es que siempre son menor que lo que le queréis meter el código y el otro menor que, ¿vale? Y terminan con otro menor que y una barra, ¿vale? Como la barra de finalizar, ¿vale? 00:16:47

Y esto se anida, o sea, podéis ver que aquí tengo un DIP que empieza aquí y termina aquí y dentro de este DIP tenéis otro código que es una B que empieza aquí y termina aquí, que ahora os digo lo que es, ¿vale? 00:17:13

Entonces, podéis anidar lo que os dé la real gana, o sea, podéis empezar a meter una cosa dentro de otra y otra y otra y otra y hacer unos mogollones impresionantes, ¿vale? Pues esta es la esencia, o sea, entender bien que esto es anidar cosas. 00:17:28

Hay que tener cuidado porque no puedes, o sea, si este B empieza dentro de DIP, tiene que acabar dentro de DIP, o sea, tengo que anidar una cosa dentro de otra, o sea, no puedo tener este nido y empezar un nido aquí y acabarlo fuera, ¿vale? 00:17:43

O sea, que teniendo en cuenta eso, luego es aprenderse un par de códigos de estos, que además están a punto, luego al final, yo no me lo sé, ¿eh? O sea, yo creo que tengo que hacer una, digo, ay, esto lo hice un día, no sé dónde voy, lo miro, pues no me acuerdo, ¿vale? Vale, pues entonces… 00:18:02

Una pregunta, ¿el BR no se cierra? 00:18:17

No, el BR no se cierra 00:18:19

porque solo tiene fin de línea, ¿vale? 00:18:21

O sea, casi todos, 00:18:23

si es que he empezado la frase y no he terminado, 00:18:25

casi todos empiezan y acaban. 00:18:27

Menos algunos que el único que vamos a ver 00:18:29

es el BR, ¿vale? 00:18:31

Que simplemente un corte y ya está, ¿vale? 00:18:32

Entonces, esto os pongo aquí. 00:18:36

Esto es una línea nueva 00:18:39

porque después del punto, 00:18:40

de este punto de aquí arriba, 00:18:41

después del punto de línea, 00:18:43

había un BR, que es el que hemos visto. 00:18:44

Y aquí empieza una sección, una división, ¿vale? Que en HTML se indica con div, lo que sea lo que sea, div, ¿vale? Y esta forma de dividir termina con un salto de línea exactamente igual que subir un VR. Es decir, que esto que os estoy marcando ahora, ¿vale? Está hecho con un div. 00:18:46

y lo de arriba 00:19:07

y esto de aquí 00:19:09

hasta aquí 00:19:11

estaba hecho con un BR. 00:19:13

Parece que no hay ninguna diferencia. 00:19:15

¿Cuál va a ser la diferencia? 00:19:17

Que el DIP me permite formatear. 00:19:19

O sea, dentro de DIP, luego aquí a continuación 00:19:21

es donde yo le pongo estilo, 00:19:23

centrado, negrita, color, fondo, 00:19:25

¿vale? Y ahí le meto 00:19:28

todos los códigos de formatear 00:19:29

la etiqueta, ¿vale? 00:19:31

Y con un... 00:19:33

Aquí no, aquí no puedo poner formato porque no tengo 00:19:35

¿Dónde? Los formatos se meten siempre dentro de los códigos, ¿vale? Entonces, esto es una sección, ¿vale? Entonces, aquí os pone la diferencia, ¿vale? 00:19:37

En la sección se pueden definir estilos, ¿de acuerdo? Y aquí viene otra sección. Os he puesto varias para ver qué es lo que pasa. 00:19:48

Si aquí empiezo otra sección, pues empiezo otra sección. Si solo he texto corrido, no vais a notar ninguna diferencia. 00:19:55

Si yo aquí hubiera puesto formatos, ¿vale? Si queréis empiezo un poquito para que vayáis viendo cómo van los formatos, ¿vale? 00:20:00

Por ejemplo, aquí le pongo un formato. El formato se pone siempre con style, en inglés, ¿vale? Style. Y luego la ortografía es un poco coñazo porque es style igual comillas. Eso siempre tiene que ir así, ¿vale? Empezar por comillas y cerrar las comillas. Y entre las comillas se ponen los estilos que quieras. 00:20:06

Por ejemplo, le voy a poner color, ¿vale? Que como en inglés es color y en inglés es color. Entonces, color, dos puntos y el color que tú quieras. Por ejemplo, red. Luego os digo de dónde salen las palabras de los colores, ¿vale? 00:20:26

Entonces, si yo le pongo esto en esta división, todo hasta aquí me lo va a poner en rojo, ¿vale? Entonces yo vengo aquí y efectivamente esta sección está en rojito, ¿vale? 00:20:43

Vale, pues estamos con divisiones, entonces, tipos de divisiones, BR, ¿vale? Y o párrafo, ¿vale? El párrafo, la diferencia entre el párrafo y las demás es que el párrafo, él solo me mete un hueco a lo siguiente que yo escriba, ¿vale? 00:20:59

Entonces, ¿veis que aquí quedó un hueco? Este hueco, por ejemplo, podría hacerlo, si yo quisiera hacer un hueco aquí arriba, donde el primer BR, ¿qué puedo hacer? Pues lo puedo hacer a manopla, o sea, donde pone BR, le pongo BR y ahora pongo otro BR, ¿veis? ¿Vale? ¿Qué me ha hecho? Me ha hecho un hueco, o sea, porque me ha hecho un salto de línea y otro salto de línea, entonces me hago un hueco a mano, ¿vale? 00:21:17

Con un párrafo te permite dos cosas, con un párrafo automáticamente lo siguiente que escribas, sea párrafo o no, te va a meter un hueco, ¿vale? Al siguiente, no al anterior, al siguiente, ¿vale? Y los párrafos, ¿cómo va? Ah, no os he dicho cómo va, bueno, lo pone aquí. 00:21:40

Ah, no le he puesto el párrafo 00:21:58

Párrafo va, pues lo pongo 00:22:01

Os lo pongo 00:22:04

Esto es un párrafo nuevo, ¿vale? 00:22:04

Se pone 00:22:07

Se pone con 00:22:08

Corchete, P 00:22:13

¿Vale? Fácil 00:22:15

Minúscula siempre, todos los códigos van en minúsculas 00:22:17

Si los ponéis, o sea, esto es case sensitive 00:22:20

No 00:22:22

Distingue 00:22:22

Mayúsculas de minúsculas, ¿vale? 00:22:25

Y para cerrar el párrafo, ¿cómo lo haremos? Con la barra de corchete, ¿vale? Minúscula, he dicho. Se pone con tal. Y es muy parecido a las secciones anteriores, es muy parecido a sección, la única diferencia es que mete el espacio, ¿vale? 00:22:27

Bien. Vale, otra forma que no me acuerdo si la escribí o no, ¿vale? Bueno, os la cuento porque no me acuerdo si la escribí. La otra forma de meter cosas es como está este texto de aquí, ¿vale? 00:22:50

Yo quiero meter algo en medio del párrafo, entonces, claro, no quiero ni que me parta ni que me meta espacio, quiero que vaya todo esto corrido, que me ponga el color o lo que narices sea, pero sin partir, ¿vale? Y eso se pone con span, ¿vale? 00:23:06

entonces veis aquí, queso rojo pone 00:23:22

aquí en medio, ¿vale? etiqueta 00:23:25

para hablar, ¿qué? ¿vale? entonces es 00:23:27

span, empieza aquí 00:23:29

y termina aquí en el corchete, lo veis, ¿no? 00:23:31

¿vale? y pone 00:23:33

style, color, style, color 00:23:35

red, ¿vale? con la 00:23:37

ortografía de siempre, ¿vale? 00:23:39

style, igual, comillas, entonces 00:23:41

todos los estilos que defináis van 00:23:43

entre comillas y al final 00:23:45

punto y coma, se separan unos de otros de 00:23:47

punto y coma, y casi todos 00:23:49

funcionan así, o sea, es 00:23:51

como una especie de 00:23:52

alguien 00:23:54

alguien tiene mucho ruido por ahí 00:23:56

entonces 00:23:59

siempre es como 00:24:00

un comando, por así decirlo 00:24:03

y el valor que adquiere ese comando 00:24:05

¿vale? 00:24:06

bien, aquí tenéis otra etiqueta que es 00:24:09

B, B es de bold 00:24:11

o sea, negrita en inglés, ¿vale? entonces 00:24:13

posibles formas de separar 00:24:15

está escrito en 00:24:17

rojo y en negrita a la vez 00:24:19

¿Veis? Que van, lo que os decía antes, ¿vale? Van anidados, o sea, el span empieza aquí y termina aquí y el bold empieza aquí y termina adelante. No podría terminar detrás y si termina detrás me daría error, ¿vale? Te produce, os lo pongo para que veáis si este de aquí, me lo quito de aquí, ¿vale? Y lo pongo aquí, ¿veis? Se pone en rojo. Cuando algo se pone en rojo es que algo va mal, ¿vale? 00:24:20

Esto es una etiqueta que está cerrada en un sitio donde no se puede cerrar. Claro, ¿por qué no puedo cerrar aquí Spam? Porque he abierto Bdentro y no lo he cerrado, ¿vale? Entonces, bueno, quiero decir que parece complicado, pero luego entre las ayudas que tiene el editor con los colorines que ayudan mogollón y teniendo un poco idea de cómo se hace, pues creo que no es complicado, ¿eh? 00:24:46

Vale, aquí, por ejemplo, el editor este yo creo que es un poco malo porque tiene cosas que no sirven para nada. O sea, si os acordáis, esto que he puesto aquí, ¿vale? El todo el texto este que lo he puesto con fondo rojo, lo he puesto añadiendolo aquí, si os acordáis, ¿vale? 00:25:10

¿Y qué sucede? Pues bueno, primero 00:25:31

que es muy limitado porque solo tiene cinco 00:25:34

colores que además son más feos que arrancados 00:25:36

¿Vale? Eso por un lado 00:25:38

Y por otro lado, lo que os decía antes 00:25:39

mete mogollón de basura, ¿vale? 00:25:42

Porque aquí, por ejemplo, mete un clash 00:25:43

que no lleva nada, que no sirve para nada 00:25:45

Esto lo podéis quitar sin problema 00:25:48

Tampoco hace falta que entréis y os pongáis a depurar 00:25:49

código ahí, quiero decir, si no hace nada 00:25:52

no hace nada, ya está, lo dejáis 00:25:54

Pero es verdad que a veces te pones a mirar dónde está hecho algo 00:25:55

y te vuelves un poco loco 00:25:58

Yo por eso empecé a meterme con esto porque a veces decía, no consigo que haga lo que quiero. Entonces, la forma de que haga lo que tú quieres exactamente es tocarle el código HTML y decir, quiero esto aquí y no en otro sitio ni de otra manera. 00:26:00

Bien, entonces 00:26:12

Vamos a ver 00:26:18

Estábamos 00:26:22

Por aquí, ¿vale? 00:26:24

Aquí empieza otra sección 00:26:28

O sea, aquí veis que tenemos 00:26:30

La sección que empieza 00:26:31

Con esto es una sección 00:26:32

¿Vale? 00:26:35

La otra que empieza 00:26:35

Con aquí viene una nueva sección 00:26:36

Y aquí pone 00:26:38

Esto es un nuevo párrafo 00:26:38

¿Vale? 00:26:40

Esto es un nuevo párrafo 00:26:40

Y acaba aquí 00:26:41

Entonces, después del siguiente párrafo, ¿vale? Y antes de esto es otro párrafo sangrado, ¿vale? Pues está el hueco este que introduce, ¿vale? 00:26:42

Vale. ¿Qué podemos meter dentro de los formatos? Por ejemplo, sangrías, ¿vale? ¿Cómo se mete una sangría? Pues una sangría, una sangría, a ver, una sangría la podéis hacer aquí arriba. 00:26:55

O sea, tenéis el botón de aumentar sangría y de quitar sangría, ¿vale? Ahora os cuento ventajas e inconvenientes de ese que lo pone aquí, ¿vale? Entonces, ¿dónde estamos? Esto es aquí, ¿vale? Esto es otro párrafo sangrado respecto al anterior. 00:27:07

¿Cómo se ha sangrado? Pues con esto de aquí, con un estilo que es margen izquierdo, 60 píxeles, ¿vale? O sea, que esto así como lo tenéis ahí, pues luego decís, vais, quiero sangrar, pues a ver, la editáis, ¿cómo era? Ah, vale, margin, margin left, tal, pues lo copiáis o tal y lo metéis, quiere decir que yo no me lo sé, además no me acuerdo si es margin guión left o era solo left o era solo margin o era, yo qué sé, si lo cuesta en apuntado. 00:27:27

Es una cosa que llevo queriendo hacer desde hace mucho, apuntarlo. Por eso me he escrito esto un poco y digo, bueno, voy a ir apuntando cosas que me van a venir bien también, ¿vale? Entonces, este párrafo, claro, ¿qué está sangrado? Todo el párrafo hasta donde haya, es decir, que hasta actual, ¿vale? Está todo sangrado, ¿de acuerdo? 00:27:56

¿Vale? Entonces veis que aquí, hasta actual, está todo sangrado. Entonces aquí, ¿vale? Hay un salto de línea, ¿lo veis? ¿Cómo he hecho este salto de línea? Metiendo un break en medio, ¿vale? Entonces dentro del párrafo podéis meter breaks, podéis meter lo que os dé la gana. 00:28:13

siempre y cuando anidéis break 00:28:32

como no anida, como simplemente 00:28:35

el código ahí a cholón 00:28:36

pues no 00:28:38

tiene problemas, ¿vale? Entonces si queréis 00:28:40

vemos el código que es lo que os digo 00:28:42

pero no es eso, bla bla bla 00:28:44

¿dónde estamos? 00:28:46

aquí 00:28:50

aquí, esto es otro 00:28:51

párrafo 00:28:52

aquí, la ortografía es 00:28:53

pues justo después de la ortografía es 00:28:59

es donde está el salto 00:29:00

¿Vale? Aquí pone, estos códigos son eso, pues los códigos de corchetes, de cosas que él escribe. Siempre empiezan por el símbolo este de la inglesa. 00:29:02

Ah, y otra cosa, dice, por cierto, ¿vale? Esto sí que es muy interesante. Si yo estoy aquí, por ejemplo, y quiero, dentro del párrafo, quiero hacer un salto de línea, si yo le doy a intro, es lo que os decía, me coge, él entiende que estoy en un párrafo y que quiero hacer otro párrafo igual. 00:29:15

Pues aquí, si queréis hacer un break, solo lo podéis hacer metiendo código HTML. No hay ninguna otra manera de hacerlo. Bueno, sí, sí, miento. O, con el truco que os voy a enseñar ahora, ¿vale? Que es, en vez de darle un retorno de carro, o sea, un intro normal, es mayúsculas intro, ¿vale? Entonces, con mayúsculas intro, mete el solo un R en el sitio donde lo has hecho, ¿vale? 00:29:35

Que está puesto aquí, ¿eh? Por cierto, para forzar aquí este cambio de línea, se pulsa mayúsculas intro, lo voy a poner en negrita, negrita es control B, o si queréis ir aquí arriba al menú, ¿vale? Y si no, habría un párrafo nuevo con el formato actual como habéis visto, ¿vale? Voy a quitarle para no meter mucha guarrería, aquí está mayúsculas, ¿sí? 00:30:02

Bueno, es verdad que luego al final les acordas 00:30:28

de muchas cosas, pero insisto, como lo tenéis escrito, 00:30:29

es, ay, ¿cómo se hacía esto? Va y lo miráis y ya está. 00:30:31

Tampoco hay que aprenderse todo. 00:30:34

Además, luego, según vayas viendo las necesidades, 00:30:35

pues me dices, ay, pues, ¿cómo hago esto? 00:30:38

¿Cómo hago lo otro? Vale. 00:30:39

Control-B. 00:30:41

¿Sí? Vale. 00:30:44

Para hacer esta sangría, 00:30:46

se puede usar... 00:30:47

Raúl, ¿puede ser que tengas 00:30:50

tú mucho ruido o soy yo? 00:30:52

Yo estoy solo. 00:30:54

Yo estoy solo. 00:30:55

Pues es que yo no sé quién tiene mucho ruido, pero me estoy volviendo medio tarumba. 00:30:58

¿Vosotros no oís mucho ruido? 00:31:02

Sí, sí. 00:31:03

Pero voy a quitar el micro, pero aquí no hay ruido. 00:31:06

No, no, no, yo qué sé, no, he dicho Raúl, no sé por qué he dicho Raúl, no tengo ni idea. 00:31:09

Alguien, alguien tiene mucho ruido por ahí por casa. 00:31:13

Vale. 00:31:16

También se puede hacer la sangría, por ejemplo, mira, lo voy a hacer, 00:31:17

voy a hacer una sangría en el párrafo este que está más abajo, ¿vale? 00:31:21

en este de aquí, ¿sí? 00:31:25

En este párrafo puedo hacer una sangría 00:31:28

y lo puedo hacer con el botón de sangría. 00:31:30

El botón de sangría son siempre 00:31:32

30 píxeles, es decir, que si queréis hacer 00:31:34

una sangría a 50 píxeles, no podéis 00:31:36

hacerlo aquí, ¿vale? Pero bueno, 00:31:38

da igual. Así que le podéis dar una vez, 00:31:40

¿vale? ¿Veis que os ha hecho 00:31:42

en el párrafo este de aquí abajo? 00:31:44

Ha hecho 00:31:51

Vicky, 00:31:52

Vicky, silencia a todo el mundo 00:31:57

y cuando queráis abrir 00:31:59

le deis a la barra 00:32:01

Oye, si me silencio yo en la grabación 00:32:02

se sigue grabando 00:32:05

Sí, sí, sí, sí, sí, solo silenciar 00:32:06

Me silencio yo también, venga 00:32:09

a la tosca ya 00:32:11

Vale, y yo no estoy silenciado 00:32:12

¿no? 00:32:19

No, porque estoy compartiendo, se supone 00:32:20

Entonces, aquí abajo 00:32:22

me ha hecho una sangría 00:32:25

de 30, que es la mitad de lo anterior 00:32:26

pero la anterior habíamos visto que era 60 00:32:29

Si le vuelvo a dar, ¿vale? Me hace otra. ¿Qué pasa? Que esto lo hace así, ¿vale? Mete, como os decía antes, pues mogollón de basura. Eso que es lo último del todo, ¿sí? ¿Cómo me lo ha hecho? Pues me mete un, me genera un div, el solo, ¿vale? Que dice div class editor indent, que esto no vale para nada, esto lo podemos quitar, toda esta mierda, ¿vale? 00:32:30

Y me crea un margen de 30 y luego me anida otro margen de 30. ¿Lo veis? Entonces, bueno, a ver, al final es porque cuando uno hace una etiqueta muy grande, muy compleja y tal, pues también si lo puedo simplificar. 00:32:53

Entonces, la anterior, ¿cómo estaba hecha? Estaba puesta delante del párrafo porque era párrafo, o sea, además de hacer la sangría, lo que quería es que luego me dejara hueco al siguiente, ¿vale? 00:33:13

Entonces, en el código de párrafo le he metido un estilo de margen izquierdo de 60 píxeles y queda mucho más limpio. 00:33:31

Si no, me hubiera dejado el párrafo con P solo y me hubiera generado dos divisiones a 30 cada una. 00:33:42

¿Vale? 00:33:53

te hago una pregunta 00:33:53

y se puede hacer 00:33:55

a ver si para ser entendido 00:33:56

o sea 00:33:58

tú le das a la tecla 00:33:58

esa que nos has dicho 00:33:59

de la barra de arriba 00:34:00

sí 00:34:01

eso genera la del de 30 00:34:02

sí 00:34:03

y yo hago eso 00:34:04

me meto aquí 00:34:05

y le cambio 30 por 60 00:34:06

eso puede ser así 00:34:08

no sé si me explico 00:34:09

lo que 00:34:11

sí, sí, sí 00:34:11

le das dos veces 00:34:11

o sea cada vez que le das 00:34:12

hace 30 y 30 y 30 00:34:13

lo que pasa 00:34:15

que lo que te hace es 00:34:15

que van ir dando 00:34:16

por eso digo 00:34:17

que le doy una vez 00:34:18

me meto aquí en el código HTML 00:34:19

y lo cambio de 30 a 60 00:34:21

eso se puede hacer 00:34:22

Ah, sí, sí, sí, sí, claro, claro, claro. Es lo que yo hago muchas veces porque no me acuerdo del código, ¿vale? Por ejemplo, los colores, que no me acuerdo muchas veces cómo van, yo le meto un color súper putre de estos, me genera la etiqueta del color y luego ya me voy a un sitio donde tengo yo los colorines, pero luego digo cuáles y le pongo ahí. 00:34:23

Y ya le pone, le cambia. 00:34:40

Maldita o mi púrpura o... 00:34:42

Ok, ok, vale. 00:34:45

Sí, sí, sí, o sea, yo de hecho, vamos, 00:34:47

de hecho yo las etiquetas las he aprendido así, 00:34:49

o sea, ponerlas y a mirar y qué me ha puesto, ¿vale? 00:34:51

O sea, prueba-error, ¿vale? 00:34:54

Vale, entonces al final de la etiqueta, 00:34:57

aquí tenéis un consejito feber, ¿vale? 00:34:59

Voy a quitar, vale, quitar esto, vale. 00:35:02

Entonces al final tenéis un consejito que dice, 00:35:07

Al final conviene poner un BR al final del todo de la etiqueta para que no se peguen a las otras etiquetas, ¿vale? Luego en la página, en el aula virtual, ¿vale? Salvo que quieras que se pegue. A lo mejor te interesa, yo tengo un sitio donde tengo muchas etiquetas muy juntitas, muy juntitas porque quedan muy monas y luego os diré cuáles y cómo. 00:35:09

Entonces, esto, perdón, vale, ya me voy de aquí, ya hemos terminado de ver esto, ¿sí? Lo voy a guardar por algún cambio que he hecho. Vale. Lo malo cuando sales de aquí es que te vuelves siempre al principio del puñetero de la virtual y tienes que correr hasta donde estás. 00:35:30

Vale, entonces, claro, fijaos que, lo voy a poner con vista de cómo queda luego el rol de estudiante, para que veáis un poco lo que os digo, ¿vale? Estudiante, ¿sí? Vale, entonces, ¿dónde está? 00:35:54

esta etiqueta empezaba aquí 00:36:17

y acababa aquí 00:36:21

esto era otra etiqueta diferente 00:36:23

como no tiene ni colores ni nada no se nota 00:36:25

pero claro, tenéis un espacio entre etiqueta y etiqueta 00:36:26

si esto tuviera su colorín y esto tuviera su otro 00:36:29

colorín, quedan separaditas 00:36:31

aquí abajo por ejemplo, las que tengo de ejemplo 00:36:33

pues están separaditas 00:36:35

¿por qué si no se os pegan la una a otra? 00:36:37

¿qué es lo que te pasa a ti Vicky? 00:36:39

que dije un día que me tiras un 00:36:40

el degradado se te pega aquí arriba 00:36:42

y joder 00:36:45

te estás currando las etiquetas de novedad para que luego 00:36:46

queden amontonadas, pues, ¿vale? 00:36:48

Entonces, al final, el truco es, al final, 00:36:51

después, ¿vale? Después de cerrar 00:36:52

el bid, el último todo, 00:36:55

un break, una línea 00:36:57

nueva, o dos, o tres, o cinco. Si quieres que te quede 00:36:59

una etiqueta ahí muy espaciada 00:37:01

de todo, pues, le metes 00:37:03

break por arriba y break por abajo 00:37:04

por lo que te dé la gana, ¿vale? 00:37:06

Porque los puedes poner también al principio del todo, 00:37:09

¿vale? Si lo pones al principio del todo, 00:37:11

te empieza generando huecos blancos 00:37:12

como retornos de carro. 00:37:14

¿Vale? Venga, más cositas. ¿Qué más cositas se pueden hacer? Esto es lo que hemos visto. Ah, vale, bueno. Vale, sí, esto lo he contado, ¿vale? Ah, sí, os quería contar, ¿vale? No, vuelvo a editarla, vuelvo a editarla porque aquí os quería contar una cosa, perdón. 00:37:16

espera que me tengo que quitar 00:37:42

de rol de estudiante 00:37:45

tengo que editar 00:37:46

activo edición 00:37:49

vale 00:37:56

como he pegado 00:37:57

esa figurita 00:38:01

también son cosas que uno puede meter ahí 00:38:02

en medio 00:38:05

como he metido 00:38:06

las copias esas 00:38:07

por ejemplo vamos a ver en esta de aquí 00:38:10

editar 00:38:13

editar, vale, me la agrando 00:38:20

vale, mira, antes de que se me olvide 00:38:40

os enseño el 00:38:46

espera, aquí 00:38:47

el break 00:38:48

vale, entonces tengo aquí la etiqueta, bla, bla, bla 00:38:51

entonces al final, vale, pues 00:38:53

después de lo último, vale 00:38:55

como esto, como esta última 00:38:56

frase de al final conviene poner 00:38:59

para que la etiqueta tal, tal, tal 00:39:01

no está dentro ni de un tip, ni de un párrafo 00:39:02

vale 00:39:06

este salto de línea 00:39:06

no hace nada, o sea, hace acabar la línea 00:39:09

nada más. Entonces, este es 00:39:11

como, digamos, el salto de línea natural y este 00:39:13

es el que genera el espacio con la otra etiqueta. 00:39:15

¿Vale? Lo normal es que 00:39:18

esto suele acabar en un dip. ¿Vale? 00:39:19

Pues después del dip, pon el sombrero. 00:39:21

¿Vale? Bien. 00:39:23

¿Y cómo pongo 00:39:25

esto, por ejemplo? Pues imaginaos que 00:39:26

os quiero decir que el editor, 00:39:29

¿vale? 00:39:31

Esto, ¿cómo lo hice? Pues con la 00:39:32

tecla, con lo que ya comentamos un día 00:39:35

en el principio, si os acordáis, ¿vale? 00:39:37

Con 00:39:39

la función esta 00:39:40

de copiar del escritorio 00:39:43

de Windows, ¿os acordáis? 00:39:45

que estuvimos viendo 00:39:48

cómo se sacaba 00:39:49

con la tecla de imprimir pantalla 00:39:50

¿vale? lo que pasa 00:39:53

que está muy pesada, a ver si 00:39:55

lo quiero hacer o no lo quiero hacer 00:39:57

aquí, entonces por ejemplo 00:39:59

por copiar algo, ¿vale? 00:40:06

para que sepáis cómo he hecho eso exactamente 00:40:09

yo copio por ejemplo, pues este de aquí 00:40:10

que es el editor de ecuaciones 00:40:13

Voy a decir, venga, pues editor de ecuaciones. Lo quiero meter aquí en medio, ¿vale? Entonces, pues os pongo aquí, ¿vale? Mira, si tengo aquí apuntada la nota, nota, contar cómo se pone y dimensiona la imagen para que no se me olvide. 00:40:15

Vale, pues yo pongo aquí, lo he dado al imprimir pantalla, ¿vale? Lo he recortado, he hecho mi recortito. ¿Habéis visto? ¿Vosotros veis cómo me salía algo de recortar pantalla? O eso no quedaba ahí, sí, vale. 00:40:29

entonces, lo pego, control V 00:40:44

¿vale? y el problema es que me pone 00:40:47

otra vez el tamaño que él decide 00:40:49

¿vale? ¿cómo le arreglo 00:40:51

el tamaño? pues doble clic 00:40:53

¿vale? 00:40:54

entonces, ahí tiene todo su 00:40:56

código de donde narices el guarde 00:40:59

la imagen, que ni lo sé ni me importa 00:41:01

entonces cuando lo editáis 00:41:03

esto, cuidado que es obligatorio ¿vale? 00:41:05

y si no os dais cuenta os podéis volver locos 00:41:07

es obligatorio 00:41:09

o ponéis una descripción de la imagen 00:41:10

o ponéis que no es necesaria la descripción, pero si no, no os lo deja cerrar luego, ¿vale? Atención con esa tonta, ¿vale? Y yo, por ejemplo, los otros botoncitos los he puesto todos a 40 de ancho, ¿vale? 00:41:13

Entonces, aquí pongo 40, ¿vale? Y marco el tamaño automático, lo que va a hacer es cuando le dé al intro, me va a hacer el tamaño proporcional, o sea, el tamaño, esto es el ancho, me va a hacer el alto proporcional, el solo, ¿vale? 00:41:27

Y ahora, ¿qué ha pasado? Se me ha perdido el ratón. Aquí. 40, he dicho 40, 40, ¿vale? Tamaño automático, ¿vale? Pincháis fuera donde queráis o pincháis en guardar imagen y luego en guardar imagen. O sea, o pincháis fuera en guardar imagen o pincháis dos veces en guardar imagen. 00:41:45

Y la imagen se ha quedado aquí guardadita, muy mona, del tamaño. Ah, se me ha olvidado un detalle, perdonad. Es que se me va para arriba, ¿vale? La vuelvo, doble clic, ¿vale? Y aquí sale alineación, ¿vale? Aquí se ha tenido alineación superior al medio tal, pues al medio, para que quede mona. 00:42:04

Guardar imagen otra vez, ¿vale? Y hemos añadido ahí una cosa que acabo de copiar de la propia pantalla o de una página web o cualquier cosa que tú has copiado de por ahí, ¿vale? 00:42:21

de acuerdo entonces el eso esto también lo podéis hacer si tenéis una imagen que tenéis guardada en 00:42:33

el disco duro también lo podéis hacer con el insertar imagen de arriba vale pero igual le 00:42:42

tenéis que dar o un nombre alternativo o tal y luego si dimensiona esa manera y luego para que 00:42:48

os quede vale pero bueno como estoy haciendo esto para con los iconitos digo pues les voy 00:42:54

contar cómo lo he hecho que luego para hacer los tutoriales y tal posible ok venga me salgo de aquí 00:42:59

y esta no la voy a guardar porque esa no me interesa y entonces le doy a cerrar sin bordo 00:43:13

y cuando estéis hasta el mismísimo gorro me lo decís porque sabes que yo tengo capacidad 00:43:19

soltar rollo hasta el aburrimiento una hora y ya está vale bien pues venga por ejemplo listas sin 00:43:23

numerar vale bueno si queréis esto lo podéis ya ver vosotros porque las listas las listas 00:43:39

estas se hacen con, espera que lo edito, a ver, editar, vale, esto sobre todo es porque, a ver, arriba, ok, vale, las listas sin numerar se 00:43:46

introducen aquí, o sea, aquí simplemente le ponéis y ya está, ahí os pone los códigos y toda la pesca, ¿vale? Lo que pasa es que es verdad que, por ejemplo, 00:44:12

A mí me ha pasado muchas veces de querer hacer algo de este tipo, ¿vale? O sea, yo tengo mi texto y luego quiero hacer un enunciado, pero no quiero que el enunciado me quede al mismísimo borde, ¿vale? Entonces, si yo aquí le pongo lista, me la genera el borde. 00:44:20

Y si trato de correrla a la derecha, lo que me hace es me genera listas de segunda categoría, o sea, me genera sublistas que ya tiene el puntito más de otra manera, no sé qué, ¿vale? Entonces, bueno, lo que hace, aquí lo tenéis explicado, lo veo directamente sobre el código, ¿vale? 00:44:35

Pues las listas, las listas, ¿cómo es en inglés? Unordered, desordenadas, ¿vale? Es un ordered, porque las otras son ordered, ¿vale? Las listas sin orden, es decir, sin numeración, son ul, ¿vale? 00:44:54

Y entonces eso queda, genera un nido, ¿vale? Que en este caso empieza aquí, tiqui, tiqui, tiqui, tiqui, tiqui, tiqui, tiqui, tiqui, y acaba, acaba, acaba, acaba aquí abajo, ¿vale? Además, otra cosa buena también de esto es que veis que sangra. Este sangrado lo hace él automáticamente. 00:45:15

Entonces, también te va bien para ver dónde empieza y dónde acaba cada nido. 00:45:32

Es verdad que si la línea es muy larga, sigue escribiendo al borde y a veces te hace perder un poco, ¿vale? 00:45:36

O sea, esto va dentro de esta lí, ¿vale? 00:45:42

Que empieza aquí y acaba aquí. 00:45:45

Lo que pasa es que como ocupa más de un renglón, se viene al margen izquierdo y ya lo jode un poco, pero bueno, ¿vale? 00:45:47

Entonces, aquí tenemos una lista que empieza aquí y termina aquí abajo, ¿vale? 00:45:53

Y cada línea está metida entre un código que es LI abierto y LI cerrado, ¿vale? Entonces, este break de aquí, por ejemplo, ¿qué es lo que hace? Pues ese break de ahí, puesto donde está, no hace nada, ¿vale? A veces lo mete él y no hace nada. 00:45:57

Sí que hace si lo ponéis fuera, ¿vale? Entonces, si este break os lo traéis fuera, que esto acordaos que lo podéis generar sin necesidad de tanto lío con mayúsculas, retorno de carro, lo que hace es que me da más espacio, ¿vale? Porque a veces queda aquí todo muy saturado. 00:46:18

Normalmente cuando pones puntitos de estos es para resumir algo, para indicar lo que quede clarito, si queda todo pegado es un rollo, ¿vale? Entonces, al final le añadís un retorno de carro porque si lo que le añado es un retorno de carro, me genera otra lista pegada y yo no quiero otra lista pegada, yo quiero que me dé ahí, ¿vale? 00:46:34

Entonces, la forma de hacerlo es o metéis un BR o mayúsculas entrar, ¿vale? Y os genera el solo un BR al final de la línea, ¿vale? Cada línea va entre li, li, no introduce espacio de línea en blanco, a no ser que tal, ahí está explicando lo que os acabo de decir. 00:46:54

Se puede definir una línea como un párrafo, ¿vale? Lo que pasa que ya eso sí que lo tenéis que hacer en HTML, ¿vale? Porque si no se vuelve súper loco. Entonces, esta de aquí, que es la cuarta, ¿vale? Si os fijáis la cuarta, una, dos, tres y cuarto, tiene el i y dentro del i tiene un párrafo. Lo veis, ¿no? 00:47:14

Y entonces, como tiene un párrafo, esta línea, ella sola, me queda con espacio después, ¿vale? Distintas alternativas, ¿sí? 00:47:35

Si yo le doy otra vez a, o sea, si después de darle a generar la, si le doy después de generar la lista, si le doy a la sangría, lo que me hace es categorizar, o sea, me crea una línea, una esta de segundo orden, ¿vale? 00:47:45

Si yo he terminado aquí de escribir mi rollete y ya quiero volver para atrás, pues le dais a correr la sangría y os lo sube de nivel. 00:48:13

Y el final de la lista termina un párrafo. 00:48:32

El final de la lista siempre os deja un párrafo por lo siguiente. 00:48:36

Es decir, que si queréis poner una lista y ahí apretar todo, no podéis. 00:48:39

Eso sí que no hay manera de hacerlo porque el código de cerrar ul automáticamente os genera un espacio en blanco. Esto es una línea ordenada, la única diferencia es que en vez de ir entre ul va entre ol y a medida que le vais dando a máxima sangría os va generando listas que vuelven a contar desde abajo. 00:48:42

lo que pasa muchas veces es que tú tienes un párrafo 2 00:49:05

y luego quieres en un punto y aparte seguir contando cosas 00:49:10

sin que te corre la lista 00:49:13

y entonces lo haces con breaks 00:49:15

entonces con breaks no te va contando 2, 3, 4, 5 00:49:18

y entonces dentro de un 2 le puedo meter varias cosas dentro del punto 2 00:49:22

esto interesa, a ver, para etiquetas 00:49:26

normalmente en una etiqueta no se escribe tanta historia 00:49:28

pero funciona exactamente igual 00:49:31

si os escribís un libro con insertar libro o una página con insertar una página, ¿vale? 00:49:33

El código es exactamente igual, ¿vale? 00:49:41

Entonces, si lo que quiero, lo que os decía antes, quiero los puntitos, 00:49:46

pero no los quiero pegados, lo tenéis que hacer en orden inverso. 00:49:50

O sea, yo escribo, por ejemplo, tengo lo que quiera, ¿vale? 00:49:52

Lo que vaya a escribir, entonces, primero le genero la sangría, ¿vale? 00:49:56

Y después de la sangría le genero los puntitos de la lista, ¿vale? Y entonces ya me la hace donde yo quiero o pues con el código que hemos visto antes que ya conocemos, con el div style margin left 30 píxel, ¿vale? 00:50:01

Entonces, esta que hemos hecho, ¿vale? 00:50:23

Da igual, yo creo que eso, ¿vale? 00:50:45

Veis que se van hidrando. 00:50:47

Aquí, por ejemplo, es una que, ah, mira, esto es de aquí, 00:50:48

¿veis? 00:50:50

Pues esto es lo que me ha generado, ¿vale? 00:50:51

Cuando le he hecho eso, ha generado esto del div class 00:50:56

y entre tantas, está el margin layer. 00:50:58

Y dentro de este div, ¿vale? Dentro de esta sección me mete la lista y dentro de la lista las líneas, ¿vale? Veis que se van ir dando todo, ¿vale? O también podéis definir el estilo en la propia lista. 00:50:59

En esta última está hecha, ¿vale? UL, entonces dentro de UL es donde le he metido el style margin length 30 píxeles. Entonces queda mucho más limpito, ¿vale? Porque aquí me tengo una sección, dentro de otra, o sea, ni de a menos cosas. 00:51:16

tenéis caras de no soporto más 00:51:35

me podéis hablar 00:51:42

me tenéis aquí así como un poco 00:51:48

si sujetáis la barra 00:51:50

pero si les tengo silenciados, no podemos hablar 00:51:54

sí hombre, porque pulsáis la barrita 00:51:57

me decís, ah que bien, me echáis 00:51:59

un comentario y ya seguís ahí 00:52:01

a vuestra bolita, venga 00:52:03

vale, pues 00:52:09

ahora sí, ahora sí estoy hablando 00:52:12

sí, sí, ahora sí 00:52:14

Que, Yago, yo lo que te digo a mí, quiero decir que yo con la tecnología un poco mal, pero con esto la verdad es que es un lenguaje, yo me he imaginado otra cosa, como casi un copiar-pegar, ¿sabes? 00:52:16

Pero sí, a ver, no, no. Yo os digo un poco porque es copiar-pegar, pero luego muchas veces no te hace lo que tú quieres que te haga. Entonces, esto está siendo un poco donde se ven las tripas, o sea, que esto lo puedes copiar. 00:52:27

O sea, que aquí, por ejemplo, tú dices, a ver, quiero hacer puntitos de estos. Pues te vas al código HTML, copias y te vas a llevar los códigos y todo para poner los puntitos. O cuando tú lo tienes copiado, te pones aquí al lado, le das otro retorno de carro y él ya te va copiando. O sea, que no hace falta que os metáis a editar. O sea, yo lo cuento un poco, pues por si alguien… 00:52:37

Para saberlo, sí, sí, eso está bien, pero que ya es un grado de profundidad que en mi caso digo… 00:52:56

Claro. 00:53:02

si voy a arrepiar voy a pegar 00:53:03

pero tocarlo no voy a tocar 00:53:04

de todas formas esto 00:53:06

había hecho esto que esta parte 00:53:08

perdón por hablar pero por ejemplo 00:53:10

lo que comentaba yo que soy de copio 00:53:12

y todas las etiquetas de Iago 00:53:15

y es verdad que a veces me había pasado lo de eso 00:53:16

quiero pegarlo y me queda en puntas y no sé 00:53:18

cómo separarlo como esta chuleta 00:53:20

no la dejas aquí pero ya sabemos que vengo aquí 00:53:22

trasteo y encuentro cómo separarlo 00:53:24

claro no y luego os diré 00:53:27

problemas que os surgirán 00:53:28

entonces de todas formas había empezado por 00:53:30

esto porque tiene menos de formato 00:53:32

y menos adorno, pero para que entendierais 00:53:34

el sistema este anidado 00:53:36

y cómo es la filosofía del HTML, 00:53:38

¿vale? Que una vez entendido tampoco es tan complicado, 00:53:40

¿vale? Entonces, 00:53:43

lo que a vosotros más os interesa, ¿no? 00:53:44

Que es poner eso, las cosas así 00:53:46

bonitas y colorines y tal, de momento, 00:53:48

y luego ya iremos a más, ¿no? 00:53:51

Pues funciona con este 00:53:53

modelo, ¿vale? Con el modelo 00:53:54

de caja. Entonces, 00:53:56

en cada 00:53:58

cosa, o sea, en un texto que yo escriba, 00:53:59

contente es el texto, ¿vale? 00:54:02

Por ejemplo, en este caso es, este es un párrafo centrado, 00:54:04

color navy, bla, bla, bla, bla. 00:54:07

Ese es el contenido. 00:54:10

Luego, lleva o no, o sea, puede llevar un padding, 00:54:11

que es un espacio hasta el borde, que aquí veis, 00:54:15

el texto tiene un margen hasta el bordecito, 00:54:18

que queda así en plan esquela. 00:54:21

¿Sí? 00:54:24

Luego tiene el borde, que es la línea azul. 00:54:25

Y luego se le puede poner incluso margen. 00:54:27

El margen va fuera del borde. 00:54:30

Digamos que el margen es exterior a la propia etiqueta, por así decirlo, ¿vale? Entonces, aquí os he puesto un ejemplo con todo, ¿vale? Para que lo veáis, ¿vale? Y aquí ya va todo con todo. O sea, esta etiqueta, Raúl y los demás, si te mola, te la coges, te la copias, escribes encima lo que quieras escribir y ya está. 00:54:32

Lo que pasa es que te pueden pasar cosas de este tipo, ¿vale? Por eso, por deciros, el HTML este de Marcos, ¿vale? Entonces tú imagínate que la has editado, la has copiado, ¿vale? Ya la has copiado y ya la tienes, ¿vale? Has pegado el lenguaje HTML en tu nueva etiqueta, ¿vale? Y ahora lo que quiero, espera que termine de cargar, que no carga, ahí. 00:54:51

Y ahora lo que quiero, por ejemplo, es, por ejemplo, aquí te quiero meter un párrafo nuevo, ¿vale? Quiero escribir. Entonces voy y le digo párrafo nuevo. Ahora no ha pasado nada grave, o sea, me ha generado un párrafo nuevo y además párrafo, porque me ha dejado espacio. 00:55:12

Pero muchas veces, al hacer algo así, ¿qué es lo que entiende? Que quieres hacer otro formato nuevo completo. Entonces, la raya azul nos la mete por aquí por medio. Entonces, ahí es donde lo abres y metes el código donde tú lo tengas que meter de un cambio de párrafo o de un tal. 00:55:36

Por eso digo que es un pelín necesario, o sea, si queréis ir a un nivel de sofisticación medianito, ¿vale? No digo básico, pero sí medianito, sí que, o sea, yo tengo que tocar muchas veces el HTML porque si no estas cosas no me salen, ¿vale? 00:55:55

Es verdad que si vosotros solo las vais a copiar y las vais a pegar, pues ya está. 00:56:12

Pues pegáis y a lo mejor no hace falta mucha complicación. 00:56:16

Aquí tienen muchos modelos, ¿vale? 00:56:18

Os pongo el HTML para que veáis cómo es entonces. 00:56:20

Fijaos, tengo div, ¿no? 00:56:24

Empieza con un div, es que me va a definir toda la etiqueta. 00:56:25

O sea, fijaos que empieza por un div y acaba al final del todo. 00:56:29

Y lo que os decía antes, al final, al final, un br, que este br simplemente para darle una línea más hasta la siguiente etiqueta. 00:56:32

Y entonces, todo este cacharro, ¿vale? Como todo, todo él va todo en azul, ¿vale? Va todo en azul, todo en negrita, no lleva todo el mismo tamaño de texto, ¿vale? Unas cosas sirven para todo y otras cosas no sirven para todo. 00:56:38

Pues lo que sirve para todo lo puedes poner desde el principio. Entonces, ¿qué sirve para todo? Pues el fondo, que tiene un fondo de un color, el margen, ¿vale? O sea, una serie de cosas sirven para todo. Entonces, aquí lleva la primera sección, el estilo, color navy, ¿vale? Luego os digo la lista de colores, ¿vale? Color navy, border, ¿vale? Estos comandos, el día que los necesitéis, tenéis aquí y los buscáis, ¿vale? Border, 10 píxel. 00:56:56

Entonces, aquí, por ejemplo, si quieres modificar el grosor de la línea, porque tú no quieres que sea tan gorda, porque parece una esquela, tienes que venir aquí a editarlo, porque todo esto ya supera con mucho al editor de HTML, al editor del aula virtual, ¿vale? 00:57:21

Todo esto no se puede hacer. Entonces, si tú quieres cambiarle esto, pues vienes aquí. Borde, no lo quiero de 10 píxel, lo quiero solo, quiero una línea finita de 3 píxel. 00:57:47

Pues tú le pones una línea de 3 píxel y te queda la línea más finita. Claro, tienes que saber un poco cómo funciona esto, por eso os lo estoy explicando, 00:57:56

porque si no vas a ir y dices, ¿dónde está el comando que me dice pon el borde más fino? Bueno, pues es que yo creo que tampoco... 00:58:03

Quiero decir, el inglés más o menos medio entiende y luego entendiendo un poco la filosofía veis que no es demasiado, ¿vale? 00:58:12

Entonces, os decía, ¿qué es común a toda etiqueta? 00:58:20

El color, ¿vale? 00:58:22

El color es color de texto, ¿vale? 00:58:23

El borde, ¿vale? 00:58:29

El borde lleva esta sintaxis. 00:58:31

Primero el grosor de la línea, ¿vale? 00:58:34

Que se puede dar en distintas unidades, pero yo recomiendo que no os compliquéis la vida en píxel, ¿vale? 00:58:36

Y es tres píxeles sin espacio. De todas formas, cuando lo tengáis que ver, venís aquí y lo veis, pero que os quede ahí rebotando en la cabeza que no podéis meter un espacio ahí. Con espacio luego va solid. Luego os diré dónde podéis sacar todos los comandos y tal. 00:58:40

solid es que es una línea sólida, puede ser 00:58:56

rast, que es punteada, o puede ser 00:58:58

a puntitos, o puede ser a punto raya 00:59:00

o puede ser no sé qué, ¿vale? 00:59:02

solid es la línea sólida, y current 00:59:04

color es un truco 00:59:06

que es el color actual, o sea, el último 00:59:08

color que yo haya mencionado 00:59:10

como yo aquí he mencionado navy, pues este 00:59:12

color va a ser también navy 00:59:14

¿qué me facilita esto? pues que yo veo 00:59:16

la etiqueta y digo, joder, parece un puticlub 00:59:18

le voy a cambiar el color, ¿vale? entonces 00:59:20

si yo aquí cambio navy y pongo orange 00:59:22

¿vale? no lo tengo que 00:59:24

cambiar en dos sitios vale los colores sí que los admiten mayúsculas pero yo os aconsejo que 00:59:26

os acostumbréis a tener los códigos en minúsculas vale orange vale si yo lo cambio me ha cambiado 00:59:32

el borde y lo que después ponía que decía con el mismo color que lo último que has puesto vale 00:59:40

entonces me cambia todo esto y no lo tengo que cambiar en dos sitios vale un comando otro comando 00:59:46

más, ¿vale? Background color, 00:59:53

pues color de fondo, ¿vale? 00:59:55

¿Qué color está puesto? Pues un color que se llama 00:59:57

azuri, ¿vale? 00:59:59

El padding, lo que os decía antes, ¿vale? 01:00:01

Tiene un padding, acordaos que el padding 01:00:03

era la distancia desde el cuerpo 01:00:05

hasta el margen, ¿vale? Para que no quede 01:00:07

ahí pegado, de 50 píxel. 01:00:09

¿Vale? 01:00:12

Tiene un ancho, o sea, esta etiqueta 01:00:13

la he hecho ahí con mogollón de cosas, pues para que 01:00:15

tengáis mogollón de comandos. Luego, 01:00:17

los corregí, los cambié, los ponéis, los quitáis, ¿vale? 01:00:19

Tiene un ancho del 70% de la ventana. Está explicado aquí abajo, ¿eh? Una distancia al texto. O sea, todo lo tenéis explicado en texto abajo. Tiene un ancho del 70% del espacio disponible. ¿Cuál es el espacio disponible? Pues depende el que haya. Ahora mismo es del lado a lado de la pantalla, ¿vale? 01:00:21

Pero cuando esto lo cierro y lo llevo al aula virtual, el espacio no es el mismo, ¿vale? Guardar cambios, no los voy a guardar para que no se me cambien los colores. 01:00:39

Entonces, cuando se me va al aula virtual, como el aula virtual mete todas las mierdas estas de editar, añadir, además no me deja llegar al margen porque no sé por qué esto se corta aquí, ¿vale? Entonces, la etiqueta tiene el 70% del espacio disponible. 01:00:50

O sea, que tiene, ¿veis? Si comparáis con las etiquetas anteriores, ¿vale? Lo pongo aquí, la etiqueta anterior está llegando, ¿veis el sombreado gris, no? ¿Vale? Pues eso sería, si no hubiera puesto margen ni nada, ocuparía todo eso, ¿vale? 01:01:11

El 70% es el 70% y para que la centre, ¿vale? Si yo, para que la centre, se pone margen automático, ¿vale? Que es esto que viene aquí, ¿vale? Entonces, eso es esto de aquí, el margin auto, ¿vale? Es para que lo centre en la ventana, ¿vale? 01:01:30

Si no lo pongo, lo quito, ¿eh? Para que veáis lo que queda, ¿vale? Está pegada a la izquierda. Puedo pegarla a la derecha, puedo ponerle un margen de 12 píxel, puedo, ¿vale? Ahí podéis jugar. ¿Dónde estaba? Lo voy a dejar, ¿dónde está esto? Control V, vale. 01:02:05

Antes habéis visto que para el código de negrita era B, ¿no? Empezamos con B y luego el slash, la barra B, ¿no? 01:02:32

Como quiero que todo el texto vaya en negrita y no quiero que me ponga B, B en la primera línea, B, B en la segunda línea, B, B en la tercera línea, 01:02:44

Hay otra forma de hacerlo que es definirlo como formato, que es font-length, font-width, bold. Y esto, como está en deep toda la sección, ya me lo hace en negrita. Ya no me tengo que preocupar de ir poniendo cada párrafo en negrita. O cada parte, o cada trozo, o cada sección, ¿vale? 01:02:52

Y lo he puesto font-size, ¿vale? Es un tamaño que esto cuando le dais aquí es el comando que os genera, ¿vale? El comando que os genera cuando le dais aquí arriba al tamaño os genera este comando, ¿vale? El font-size. 01:03:12

Lo que pasa que igual, esto es súper limitado porque tiene tres tamaños que son una mierda, además, porque unos son muy, o sea, pasan de un tamaño que no se nota la diferencia con el normal a uno que es súper feo y súper grande, ¿vale? Entonces, el tamaño lo podéis definir en píxel exactamente, es decir, yo quiero que sea de 7 píxel, pero los tamaños concretos normalmente no suelen funcionar. 01:03:29

¿Por qué? Porque si tú agrandas o empequeñeces, si tú has puesto el carácter de 12 píxel, si el resto del texto está a 6 píxel, te queda una letra grande, pero si de repente agrandas el texto, como eso va a seguir a 12 píxel, lo que te queda es más pequeño que lo demás. 01:03:53

Entonces, normalmente se suele trabajar siempre con magnitudes relativas. Entonces, ¿el 125% de qué? El 125% del estilo actual. Y el estilo actual, como no tengo ningún estilo ahora, es el texto plano, ¿vale? 01:04:11

Aquí al final os he vuelto a poner lo mismo, ¿vale? Y dice, otra vez dice, os he hecho una sección dentro de la última línea que dice, a ver, ¿dónde estaba? Aquí, en esta línea, dice, style, ¿no? Style, font size, 125%, ¿pero 125% de qué? Del texto que tenía ahora, que ya estaba al 125%, ¿vale? 01:04:26

O sea, es relativo a lo que esté haciendo en cada momento, ¿vale? 01:04:56

Que lo pone aquí, el tamaño del texto es de 125% del tamaño actual. 01:04:59

Como está dentro de anterior, que ya era de 125%, 01:05:03

se lo va a hacer al 125 de 125, ¿vale? 01:05:06

Entonces, pues queda esto que está aquí, ¿vale? 01:05:10

Que está aquí explicadito todo, el font-weight que os he contado, 01:05:13

o sea, yo creo que está bastante bien, ¿vale? 01:05:16

Entonces, el centrado, el párrafo este solo estaba centrado, 01:05:19

¿por qué solo ha centrado el párrafo de arriba? 01:05:23

porque el estilo centrado lo he puesto dentro de párrafo, ¿veis? Párrafo, estilo, centrado, y me va a centrar el párrafo, o sea, está aquí, y el resto ya no lo centra, ¿vale? O sea, una vez que yo cierro un nido, todo lo que está definido de ese nido no sale fuera, se queda ahí dentro, o sea, si yo quiero, si yo aquí ahora, por ejemplo, le pongo color, ¿vale? Color, purple, purple, cuidado que se me olvidan los dos puntos, ¿vale? 01:05:25

Si yo aquí le pongo color párpil, ¿qué me va a poner en color párpil? Este párrafo. ¿Y esto en qué lo va a poner? En blue, o sea, en el navy, que es este azul marino, ¿vale? ¿Por qué? Porque todo, todo, todo esto estaba en azul marino. 01:05:53

Si yo dentro le meto un nido que dice púrpura en este trozo, cuando me salgo del nido sigo en lo que tenía antes, que es azul, ¿vale? Y entonces aquí tenéis un ejemplo, pues aquí dice, espera, lo pongo así, ¿vale? 01:06:10

Entonces, para definir secciones, ah, vale, si yo sabía que lo tenía apuntado, lo hemos visto antes, ¿vale? Era span, span, ¿te acordáis? 01:06:32

Pues si yo quiero definir aquí secciones, aquí dentro del texto, sin que cambie de línea, es span, span. 01:06:42

Entonces, por ejemplo, puedo cambiar el color del texto, por ejemplo, puedo cambiar el fondo, por ejemplo, puedo cambiar el tamaño, o por ejemplo, puedo cambiar toda la vez, ¿vale? 01:06:47

Entonces, ¿esto cómo está hecho? Pues está hecho aquí, ¿vale? Para definir secciones dentro del texto sin que cambie la línea, ¿vale? Entonces aquí, span color red, por ejemplo, para cambiar el color rojo del texto. 01:06:54

Entonces aquí, este trozo, está una sección que está en rojo. Esta sección tiene color de fondo, background color, amarillo, ¿vale? La siguiente sección tiene un estilo, lo que os decía antes, un estilo fijo de 30 píxel, ¿vale? Ahora voy a agrandar y voy a empequeñecer y veréis lo que pasa con los 30 píxel. 01:07:10

Y aquí todo junto, o sea, tengo un span donde he definido color rojo, fondo amarillo y tamaño de 30, ¿vale? Entonces, fijaos, si yo aquí cambio, fijaos en el tamaño de arriba y el tamaño este. 01:07:30

Si yo agrando la letra, ¿vale? Si yo voy agrandando, todo esto que era relativo al 125%, si os acordáis, se agranda. Sin embargo, esto último que hemos visto, que lo había puesto fijo a no sé cuántos píxeles, no me acuerdo cuántos dije, pues parece que sí que aumenta. Pues igual sí que aumenta de manera proporcional. 01:07:50

Bueno, da igual, que sepáis, esto al final es probar, ¿vale? Bueno, pues ya está, en esencia es esto, y ahora lo que tenéis aquí son muchos ejemplos que os puedo comentar o ya los destripáis vosotros y bicheáis, ¿vale? Os he puesto muchas para que tengáis ahí un muestrario y para que podáis trastearlas cuando lo necesitéis, ¿vale? 01:08:18

Entonces, a ver que se me ha quedado esto pequeño, ahí, vale 01:08:48

Yo por ejemplo al principio me emocionó mucho esto de poner una ventanita así del 70% centrada 01:09:02

Porque queda muy mono, pero problema, esto en un móvil es horrible 01:09:21

Porque si al móvil le quitas el 30% a la pantalla, te sale todo escrito en vertical 01:09:25

entonces no lo he hecho nunca 01:09:32

pero vamos, o sea, lo hice una vez y cuando 01:09:34

vi el éxito, no lo he vuelto a hacer 01:09:36

y bueno, aquí tenéis 01:09:38

pues nada, torraditas, degradados 01:09:40

¿vale? se hacen con este comando 01:09:42

background, linear gradient 01:09:44

entonces 01:09:46

primero se le pone la dirección, ¿vale? 01:09:48

hacia abajo, hacia arriba, hacia la derecha, hacia la izquierda 01:09:50

el primer comando es 01:09:53

un color, o sea, coma, un color y un porcentaje 01:09:54

¿qué indica eso? 01:09:56

¿en qué porcentaje empieza el degradado? 01:09:58

Entonces, cuando aquí dice white, 20% es el primer 20% que lo veis aquí es blanco y a partir de ahí empieza el degradado, ¿vale? ¿Dónde empieza el siguiente? En el 80%, es decir, que deja un 20% de azul macizo, ¿vale? El degradado va desde aquí hasta aquí, ¿vale? 01:10:00

Si yo cambio los porcentajes para que lo veáis un poco cómo funciona, ¿vale? Si cambiamos, a ver si se dicta, relojito, si le cambio, vale, si le cambio los porcentajes, ¿vale? Si le pongo desde el 0%, por ejemplo, ¿vale? Hasta el 100%, ¿qué me va a hacer? Me va a hacer toda la etiqueta degradada, ¿vale? 01:10:16

O sea, blanco sería solo una línea de arriba del todo finita finita, azul sería una línea de abajo y el resto toda la gradación, ¿vale? ¿Veis? Pues aquí empieza, el degradado empieza aquí y llega hasta abajo, no tiene una parte así de color macizo, ¿vale? 01:10:54

y eso se hace 01:11:14

pues con este comando 01:11:16

que no hay que aprendérselo 01:11:17

o sea 01:11:18

el día que lo necesites 01:11:18

lo copias 01:11:19

pero luego eso pues 01:11:20

quiero que me quede 01:11:21

más así 01:11:22

o más asado 01:11:22

más tarde 01:11:23

ya sabes 01:11:23

donde se 01:11:24

donde se toca un poco 01:11:25

¿vale? 01:11:26

¿qué quiero hacer? 01:11:29

aquí 01:11:30

¿vale? 01:11:31

cancelar 01:11:35

¿vale? 01:11:35

la siguiente 01:11:47

es otro degradado 01:11:48

¿vale? 01:11:49

lo que pasa es que así 01:11:50

solo podéis hacer 01:11:50

degradados 01:11:51

de arriba a abajo 01:11:52

de abajo a arriba 01:11:52

de izquierda a derecha o de derecha a izquierda. 01:11:53

Le pones tú, left, right, 01:11:55

bottom, top, ¿vale? 01:11:57

Ahí. 01:12:09

Vale. ¿Cómo se hace 01:12:10

esta, por ejemplo, que tiene degradado por arriba 01:12:12

y degradado por abajo? Pues aquí lo que hay es 01:12:14

un 01:12:16

div que no tiene nada 01:12:18

dentro, os lo muestro que creo que es más fácil 01:12:20

editarlo que 01:12:22

explicarlo aquí en vacío, ¿vale? 01:12:24

Entonces, esta 01:12:28

Esta tiene una sección, ¿vale? Que el texto está con un gradiente, ¿no? De arriba abajo, del 0% blanco al 100%. 01:12:29

Cuidado que esto no es proporción de blanco, ¿eh? Esto es el tamaño, desde qué punto empieza, ¿vale? 01:12:53

Desde el principio del todo hasta el final del todo empieza en blanco y termina en rojo, ¿vale? 01:13:00

¿Y qué hay aquí dentro? Nada, dos líneas, nada más, dos líneas blancas, ¿vale? 01:13:04

Luego el texto, ¿vale? Está puesto con color de fondo rojo, ¿vale? Y color del texto blanco y está alineado y está al 50%, ¿vale? Y luego el último trocito que va degradado al final, ¿vale? Va hacia abajo de rojo a blanco en vez de blanco a rojo. 01:13:08

O aquí, en vez de ponerlo así, también podéis poner hacia arriba, ¿vale? Hacia arriba, to top y empezando por white, si va hacia arriba sería white abajo, ¿vale? White abajo al 0% y red arriba. Y va a ser exactamente lo mismo, ¿vale? 01:13:32

Y entonces queda continuo. Como no hemos metido nada en medio de las secciones, lo que os decía antes, ¿veis? Las secciones quedan totalmente pegadas. Y si fueran secciones de etiquetas distintas, pasa casi lo mismo. Entonces, una sección degradado, otra sección roja maciza y otra sección degradada. 01:13:54

Ahí. Corraditas. 01:14:15

esta de aquí, que queda muy mona 01:14:21

¿cómo se hará? pues 01:14:45

un dip, otro dip, otro dip, otro dip 01:14:46

otro dip, otro dip y van cambiando los colores 01:14:49

¿vale? y os cuento 01:14:51

lo de los colores 01:14:53

¿vale? bueno pues 01:14:54

la técnica 01:14:56

yo creo que ya la habéis cogiendo ¿vale? 01:14:59

esta igual tiene dos partes, tiene la parte 01:15:00

de arriba y la parte de abajo, son dos dip 01:15:03

diferentes, ¿vale? Porque si metes una parte dentro de otra, como mucho, como mucho, te llega hasta aquí, te deja un poquito blanco. Si quieres que te quede una cabecera llena hasta el final, lo tienes que hacer como una parte y luego otra, ¿vale? Miráis en el código cómo está hecho y lo veis. Y esta, que llevaba tiempo viendo cómo lo conseguía, cuando estaba preparando esto, se me ocurrió ya cómo hacerlo, ¿vale? 01:15:04

Porque los borders, bueno, las estas que van redonditas, se hace dando un radio. Las redonditas, pues mira aquí. Las redonditas van con este comando. Con un radius, que se parece mucho a un radio. 01:15:30

¿vale? aquí tienes 01:15:49

la etiqueta lleva un background 01:15:58

de este color, ahora os digo que es eso 01:15:59

¿vale? margin automático 01:16:02

este margin por ejemplo aquí no pinta nada 01:16:04

¿por qué? porque como no tiene 01:16:05

un tamaño 01:16:07

por ejemplo como antes del 70% 01:16:09

esto va a llenar la ventana de lado a lado 01:16:11

entonces esto lo puedo borrar que no va a cambiar 01:16:13

absolutamente nada ¿vale? 01:16:15

entonces 01:16:18

este es border radius 01:16:19

¿vale? entonces tiene un borde de 20 01:16:21

píxeles, esos 20 píxeles 01:16:23

de curvatura. ¿Vale? Como abrir un 01:16:25

compás a 20 píxel y hacer la 01:16:27

curvita del borde. Si le aumentas 01:16:29

el... Si le aumentas esto, 01:16:32

por ejemplo, le pongo 40, 01:16:33

¿vale? Pues veis que os hace 01:16:35

la curva más pronunciada. 01:16:37

¿Vale? Y si le ponéis 01:16:40

mucha, se os junta la de arriba con la de abajo 01:16:42

y queda esto así todo redondito. 01:16:44

¿Vale? Si le pongo aquí, por ejemplo, 01:16:46

algo del tipo... 01:16:48

Yo qué sé. No sé si 01:16:50

me va a admitir 100. 01:16:52

¿Veis? Os queda todo redondito. 01:16:56

Lo que pasa es que hay que tener cuidado porque el texto se os puede salir. 01:16:58

Entonces, para eso le pones un padding, ¿vale? 01:17:02

Le aumentas el padding, que eran los lados. 01:17:04

Si solo pones padding y un número, es por los 4 lados. 01:17:07

Y puedes decir padding left, padding right, padding top, padding botón. 01:17:11

Entonces, aquí le digo, tiene un padding, por ejemplo, padding, creo que era así, no me acuerdo, padding top. 01:17:15

Vamos a probar. 01:17:23

Padding top 7 píxel, ¿vale? 01:17:24

Y luego un padding left de, por ejemplo, 30, 40 píxel, que esto venía junto, punto y coma para separarlo. 01:17:25

y otro padding 01:17:46

a ver si se hace así, padding 01:17:47

guión 01:17:49

eh 01:17:50

right 01:17:52

right 01:17:55

padding right, dos puntos 01:17:57

el valor 01:18:02

eh, 40 01:18:03

píxel 01:18:06

vale, pues 01:18:07

bueno, habría que darle más, esto es probar 01:18:12

vale, pues habría que darle un poquito más, pero 01:18:14

no lo corta, no lo corta 01:18:16

vale, y 01:18:17

Y poco más. 01:18:24

Entonces, ahora, aquí al principio os he puesto, ¿vale? 01:18:27

Os he puesto aquí, ¿vale? 01:18:30

La Biblia de HTML. 01:18:33

Que esto es un enlace y pincháis y luego aquí tenéis un enlace ahí y tenéis un enlace también aquí. 01:18:35

Quería haberos puesto más a cada cosa, pero ya no me dio la vida. 01:18:40

Entonces, ¿dónde los teníais? 01:18:47

Aquí al principio. 01:18:51

Aquí, aquí, aquí. 01:18:54

Aquí, si pincháis aquí, os va directamente a los parámetros de margin. Si pincháis aquí, os va a los parámetros de border. Aquí es donde podéis ver lo de border right, border left, border no sé qué, cómo se pone, cómo no, qué quintero lleva, todo. Y aquí el de padding. 01:18:56

Pero vamos, todo eso es parte de este de aquí, ¿vale? Que os lo voy a enseñar y os voy a contar qué uso, cómo lo uso. Entonces, esta es una página web que yo la tengo aquí puesta en el escritorio directamente, que aquí tenéis todo lo que necesitéis. 01:19:14

O sea, imaginaos, por ejemplo, que decís, ¿cómo era lo de padding? ¿Dónde estaba? Ahora mismo no me acuerdo, ¿vale? Venís aquí, al buscador, pones padding, ¿vale? Padding. Claro, hay que acordarse que es con dos Ds, pero bueno, padding. 01:19:37

Y entonces te salen los distintos sitios de esta página, que me parece buenísima, donde te cuenta cosas de padding, ¿vale? Entonces, pues aquí, por ejemplo, si queremos ver cómo era lo de write, buttonlet, no sé qué, pues vemos que aquí pone padding large, 12 pixels, no sé qué, bueno, pues entras por ahí o donde te apetezca, ¿vale? Y vas viendo, ¿vale? 01:19:50

Entonces aquí entras y te dice, por ejemplo, bueno, aquí hay una cosa que yo no termino de entender muy bien, que es esto de la class, del CSS, o sea, yo sé que el CSS no es lo mismo que HTML, pero aquí los estilos yo los saco de aquí, ¿vale? 01:20:13

Y aquí es donde veo qué escritura rigen y todo eso, ¿vale? 01:20:40

Entonces, pues, aquí esto es, ¿vale? 01:20:47

Bueno, espera que esto me mete en un sitio demasiado complicado. 01:20:53

Espera, no, esto no sé ni de qué me está hablando. 01:20:55

Vuelvo a buscar padding. 01:21:00

Me voy, normalmente el primero es donde suele estar lo sencillo, ¿vale? 01:21:08

O en el otro que ponía properties, ¿vale? 01:21:12

Entonces, aquí te viene un ejemplo. 01:21:14

este elemento tiene un padding de 70 píxeles 01:21:16

y aquí donde dice 01:21:19

try yourself, esto está genial porque 01:21:20

esto es un editor de HTML 01:21:22

entonces tú le pinchas 01:21:24

try yourself y te viene 01:21:26

para que veas el efecto que tiene 01:21:28

entonces dices, padding 70 píxeles 01:21:30

pues voy a ver qué es lo que cambio 01:21:33

voy a ver qué pasa, entonces le dices aquí 01:21:34

pues venga, le voy a poner 10, a ver cómo funciona 01:21:36

le das a run 01:21:38

y aquí a la derecha te sale el resultado 01:21:39

y ves lo que ha pasado, que todo ha disminuido 01:21:42

entonces esto, cuando dices 01:21:44

A ver qué coño es esto, vamos a probar, ¿no? Pues vienes aquí y pruebas, ¿vale? Y me parece, vamos, genial. Entonces aquí es lo que os decía, os viene un ejemplo, os viene tal y os dice que tiene propiedades específicas para cada uno, o sea, tiene padding top, padding right, padding bottom, padding left. 01:21:46

Y os cuenta que puede tener los siguientes valores, una longitud que puede ir en píxel, puede ir en puntos, puede ir en centímetros, en tanto por ciento o esto es heredado de la parte anterior, esto es más sofisticado. 01:22:07

Esperamos, o sea, que sepáis. A ver, esto yo quiero ponerle como así de gordo. ¿En qué lo pongo? Pues si lo quieres poner como tan de 10 centímetros, dice, vale, yo quiero que sea de 0,2 centímetros, que son 2 milímetros. Pues lo metes en centímetros y no en píxel. O sea, aquí te vienen las unidades que te admite. 01:22:22

Y luego te dice que tú puedes establecer los cuatro, pero luego te dice sorja, o sea, atajos, ¿no? Si tú solo pones cuatro valores, o sea, si tú pones cuatro valores sin poner nada más así, acapella. Padding, 25, 50, 75, 100. ¿Cómo lo entiende? Entiende 25 arriba, 50 a la derecha, 75 abajo, 100 a tal. 01:22:38

O sea, quiere decir que aquí tenéis toda la ortografía y todos los comandos y todos los tal que rige cada uno de los parámetros que tenéis, ¿vale? 01:23:05

Perdona, Iago. ¿Puedes combinar parámetros? Es decir, ¿puedes utilizar en una misma etiqueta centímetros y píxeles, por ejemplo? 01:23:16

O si estás usando píxeles, son píxeles para todo. 01:23:26

Pues try yourself, ¿vale? 01:23:30

Vamos a verlo, ¿vale? 01:23:33

Venga, entonces lo voy a poner aquí, 100 píxel. 01:23:35

Esto es padding, que es espacio. 01:23:38

Pues le voy a poner, por ejemplo, el de la izquierda, que es el de aquí, que es el que mejor se ve, ¿vale? 01:23:40

Pues le voy a poner un centímetro, ¿vale? 01:23:45

A ver qué hace. 01:23:49

Lo corro, ¿vale? 01:23:50

Y me ha puesto esta distancia para ver si ha funcionado. 01:23:53

Lo voy a cambiar, ¿vale? 01:23:56

Y le voy a decir que, por ejemplo, 0,2 centímetros para que se vea bien la diferencia, ¿vale? Efectivamente. Lo que pasa que estoy viendo que me lo ha cogido todo, ¿vale? Porque a lo mejor no son 0,2, igual son 0.2, ¿vale? Efectivamente, ¿vale? Porque el primero es el de arriba, ¿veis que esto lo ha puesto cortito? 01:23:58

vale 01:24:24

entonces pongo aquí centímetros 01:24:24

aquí 01:24:25

pues la respuesta 01:24:26

sí 01:24:27

vale 01:24:28

vale 01:24:29

que yo no lo había probado nunca 01:24:30

pues 01:24:31

o sea que 01:24:32

lo bueno 01:24:33

de esta página 01:24:34

es que tiene un mecanismo 01:24:35

muy fácil 01:24:36

para probar 01:24:37

todas esas cosas 01:24:37

y como pongo 01:24:38

y puedo poner tal 01:24:40

y puedo poner no sé 01:24:41

lo pruebas chico 01:24:42

y ya está 01:24:43

y esto es mucho más rápido 01:24:43

y más ágil 01:24:45

que la aula virtual 01:24:45

pero probar esto 01:24:46

en la aula virtual 01:24:47

es un coñazo infumable 01:24:47

pues aquí 01:24:49

vale 01:24:49

entonces bueno 01:24:52

Pues, por ejemplo, Padding, si le metéis solo tres valores, ¿vale? ¿Cómo lo entiende? Si le metéis tres valores, ¿entiende? El de arriba es 25, el de la izquierda y la derecha es el valor central y el de abajo es el de la derecha, ¿vale? Si le metéis solo dos, ¿cómo los entiende? Y si le metéis uno, entiende que es todo, ¿vale? A los cuatro. 01:24:53

Etcétera, etcétera, etcétera. Entonces, la página principal es esta, ¿vale? El HTML es aquí. Entonces, yo aquí muchas veces, pues, muchas veces diría, ah, coño, párrafos, venga, pues voy a ver cómo es esto de párrafos. Y pincho aquí, cotilleo y yo, vamos, todo lo que estoy contando lo he aprendido de aquí, porque no he hecho ni curso ni nada. 01:25:15

Entonces, es de styles. Venga, a ver cómo es lo de styles. Pues lo veo ahí. Cuidado porque el lenguaje del aula virtual es HTML, pero es un poco capao. Es decir, no te permite hacer muchas de las cosas que te cuenta aquí. Aquí te dice, no, defines una clase, no sé qué, no sé cuánto y tal. Yo con eso me he peleado muchas veces y he sido incapaz de hacer nada. 01:25:33

O sea, al final es un poco coger estos formatos y meterlos dentro de las etiquetas, ¿vale? No todas las etiquetas admiten todos los formatos, pero bueno, al final es ir probando. A ver, dentro de un párrafo, por ejemplo, nunca había definido, hasta que lo hice ayer, nunca había definido una lista con formato. 01:25:55

Y dije, bueno, voy a ver si dentro del comando de lista, ¿no? Donde empieza la lista, le puedo decir, vale, pues ponme un margen de 60 píxel y me funcionó, pues ya está. Me funciona, pues lo hago, ¿vale? Entonces, yo aquí uso mucho esta de aquí, la de colors, ¿vale? Entonces, la de colors, ¿dónde os viene? Pues a los colores, ¿vale? 01:26:14

Y aquí tenéis todos los colores, ¿vale? Bueno, aquí pone colors, espera, ¿eh? ¿Por qué no ha salido donde yo quería? A ver, un momentito, espera, un segundo, espérate que estoy tratando en principio, vale, colors, o sea, cuando pensáis venís aquí, ¿vale? Learn colors, entonces le prendemos colors, ¿vale? 01:26:34

Y aquí tenéis ejemplos, ¿vale? Cómo se generan, bueno, os cuento aquí un poco de cómo va el asunto. Entonces, pero es que no sale, a ver, ¿por qué no me sale? Espero un momento, a ver, un segundito, Liz, que me voy a ir, a ver, mi HTML referencia, aquí, aquí, pues en Colors, no sé por qué, a ver, Colors. 01:27:01

esta es, aquí, eso es, vale 01:27:47

si en el enlace que yo os he puesto 01:27:57

pintéis en color, sale aquí 01:27:59

aquí tenéis todos los colores que tienen 01:28:01

nombre, vale 01:28:03

entonces, por ejemplo 01:28:04

el azure es este de aquí, un azul como 01:28:07

muy clarito, muy clarito, entonces 01:28:09

los colores los podéis 01:28:10

meter con un nombre 01:28:13

que luego para leer el 01:28:14

cuando tú lo quieres leer es lo más fácil, que tenga un nombre 01:28:16

identificativo, con 01:28:19

un código hexadecimal 01:28:21

que es este de aquí, que sería este de aquí, o con otro tipo de código, esperamos, lo más fácil son esos dos. 01:28:23

¿Qué más hay aquí que es muy interesante? Pues aquí que es muy interesante hay, a ver si esto quiere moverse, 01:28:32

es por ejemplo, imaginaos que quiero hacer la etiqueta esa verde que tengo ahí degradada, por ejemplo esta de aquí, 01:28:39

¿cómo la he hecho? Pues yo me cojo un verde, digo venga, quiero partir de este verde, ¿vale? 01:28:45

Y entonces me voy al color mixer, ¿sí? Que está aquí, ¿lo veis? ¿Vale? Me voy al color mixer y esto lo que me hace es, como su mismo nombre me indica, mezclas de colores. ¿Qué me mezcla? Pues lo que yo quiera, es decir, si yo abajo he cogido el verde, ¿vale? Aquí tenéis, o sea, esto corresponde a la parte de abajo y esto corresponde a la parte de arriba. 01:28:49

entonces aquí arriba pongo blanco me genera toda esta todos estos tonos y me ponen los códigos de 01:29:11

los colores vale esa etiqueta que estaba en verde que eran así varias sanidad as que hacía me cogía 01:29:21

este código de color luego me cogía tres más arriba luego me cogía tres más arriba luego me 01:29:27

cogía tres más arriba a cada a cada haciendo dip dip dip dip dip y a cada una le iba poniendo un 01:29:32

color de fondo, ¿vale? O yo quiero que degrade al, yo qué sé, al azul, ¿vale? A este azul. Me hace una gradación al azul. O quiero que haga no sé qué, ¿vale? 01:29:39

Entonces yo este le uso mucho y luego también tenéis los colores por grupos, ¿vale? Porque muchas veces para que las etiquetas no queden en plan 01:29:54

puticlub, conviene tener un mínimo 01:30:03

de armonía, ¿no? Entonces, pues a ver, 01:30:05

estoy buscando tonos 01:30:07

rojos, tonos cálidos, pues aquí los tenéis 01:30:09

por grupos. Entonces, colores rosas, 01:30:11

todos los que hay, ¿vale? Todos los 01:30:13

que hay con nombre, porque colores hay 01:30:15

no se cuentan millones, ¿vale? Pero todos los que 01:30:17

hay que tienen nombre, que están codificados por 01:30:19

las normas UNE estas 01:30:21

y su padre y su madre, ¿vale? Colores 01:30:23

púrpuras, ¿vale? Pues estos de aquí, 01:30:25

que se parecen un poco a los otros. Colores 01:30:27

rojos, colores 01:30:29

orange, colores yellow, entonces aquí 01:30:31

los tenéis clasificaditos por grupos 01:30:33

aquí los tenéis 01:30:35

el color picker 01:30:37

es 01:30:38

color picker, color picker 01:30:40

es 01:30:43

aquí por ejemplo 01:30:44

tenéis una muestra de cómo 01:30:47

queda un texto 01:30:49

sombreado, blanco, tal, sobre 01:30:51

cierto fondo, y esto 01:30:53

también te hace degradados 01:30:55

que tú eliges, o sea es desde el negro 01:30:57

hasta el blanco 01:30:59

tomando como color central el rojo 01:31:01

por ejemplo, desde el negro hasta el blanco 01:31:03

tomando como color central el azul 01:31:05

¿vale? entonces 01:31:07

pues para hacer, pues yo que sé 01:31:09

para jugar, o quiero un azul 01:31:11

pero más oscuro, pues te vienes aquí 01:31:13

vale, pues me cojo el código 01:31:15

control c, control v 01:31:16

¿vale? y donde ponía color 01:31:19

no sé si os acordáis que antes ha salido 01:31:21

alguno que antes, algunos lo ponía con 01:31:23

nombres, pero otro ponía el codiguito, este va adelante 01:31:25

siempre con el hashtag 01:31:27

el código en hexadecimal 01:31:29

y ya está 01:31:33

bueno, aquí tenéis, por ejemplo, el gradient 01:31:36

un día dije, gradient, hostia, como mola 01:31:38

y de aquí es donde aprendí a hacer los degradados 01:31:40

esos que os he enseñado 01:31:42

en las etiquetas, o sea que esto es 01:31:43

curra en color, por ejemplo, un día dije, curra en color, ah, como mola 01:31:45

y aquí aprendí 01:31:48

lo de que no tengo que escribir dos veces, sobre todo 01:31:50

cuando estás haciendo pruebas y dices, jo, es que queda horrible 01:31:52

pues lo cambio, pues no tienes que cambiar 01:31:54

en varios sitios, cambias en 01:31:56

en uno y el siguiente ya 01:31:57

va ahí en consecuencia 01:32:00

pues chimpún y 01:32:01

si queréis, espera 01:32:05

lo que os dije antes 01:32:07

a ver dónde estaba, me tengo que ir 01:32:08

aquí, lo último 01:32:11

lo de pasar el ratón por encima y que salgan 01:32:13

cositas 01:32:15

es una virguería total que ni me acuerdo 01:32:16

cómo se hace, a ver si lo 01:32:19

encuentro en un tiempo prudencial y si no 01:32:23

pues se lo está cargando 01:32:25

o qué hace 01:32:31

vale, a ver 01:32:31

Por ejemplo, esta que está aquí, que es una muy sencillita 01:32:39

Pues nada, es un fondo verde con su padding suficientemente grande 01:32:52

Para que haga el redondelito y ya está 01:32:55

Sí, pum 01:32:57

A ver, ¿dónde está eso? 01:32:59

Está más adelante 01:33:01

Más adelante 01:33:02

Venga, hijo, no te tostes 01:33:05

Por aquí 01:33:10

Aquí, mira, ¿veis? 01:33:15

¿Veis? 01:33:24

Vale 01:33:26

Pues aquí, ¿dónde estoy? 01:33:27

¿Dónde he ido? 01:33:29

Coño. 01:33:37

Ah, aquí, aquí, aquí. 01:33:37

Ahí, ¿vale? 01:33:38

Ficha 3-2, propiedades químicas de los elementos. 01:33:39

La resolución de esta ficha se basa en los principios que figuran en la hoja de teoría. 01:33:43

Si después de intentarlo no te sale, pasa el ratón por aquí para ver la primera pista. 01:33:46

Entonces, al poner el ratón encima, te sale una pista. 01:33:52

¿Lo veis? 01:33:56

Aquí para ver la segunda pista. 01:33:57

Pones el ratón, segunda pista. 01:33:59

todos los elementos de un mismo grupo 01:34:01

tienen los mismos editores de Valencia 01:34:02

y aquí para ver la tercera pista 01:34:04

todos los elementos de un mismo grupo 01:34:06

tienen propiedades químicas parecidas 01:34:07

y esto se hace 01:34:08

pues no tengo ni idea 01:34:11

pero vamos, lo editamos 01:34:12

y lo vemos 01:34:13

porque no me acuerdo ya 01:34:14

además me fui haciendo una página 01:34:16

con anotaciones 01:34:21

y me la borraron 01:34:22

joder, me sentí 01:34:24

pues no, qué mal 01:34:25

y estaban estas anotaciones allí precisamente 01:34:26

es un comando muy sencillo 01:34:29

es una chorradita 01:34:35

A ver, title, ¿vale? Veis que aquí pone, espera, espera que se cargue porque está ahí, espera, lo editamos, aquí, aquí, entonces hay un, ¿veis? Hay un span, o sea, una división, ¿no? En color rojo, entonces el title es lo que, el pop-up, lo que salta. 01:34:36

Todos los elementos de un mismo grupo tienen los mismos electrones de Valencia. Y luego a continuación va sobre qué va. Aquí para ver la segunda pista. Eso es lo que está escrito. Esto es lo que he escrito en color naranja. Se cierra el fin y aquí aparece otro span. Es una sección, es span porque va dentro del texto. No es un div. He dicho div, pero me he equivocado. No es un div porque el div metería corte delante y detrás. 01:35:13

La otra forma, la que os decía, la otra forma de meter color, aquí pone color RGB, cuando le dais a color aquí, cuando le metéis color con los comandos, os lo mete así, RGB, entonces es un número que va de 0 a 256 de red, green, blue, pero claro, esto es súper poco elegible, pero bueno, da igual, si le pintáis ahí, pues que sepáis, color RGB, es la tercera forma de dar los colores. 01:35:43

Y ahora sí, fin. Creo que ya os he aburrido suficiente. Se nota que hoy era más densito que los otros días. Bueno, quitaros el micrófono y decidme algo, por fin. Me siento solo y fatal. 01:36:09

Las imágenes, Yago, que he visto que tenías algunas etiquetitas con imagen, ¿las metes a solón en el editor normal, digamos? 01:36:29

No, no, eso también requiere HTML. 01:36:37

Ah, vale. Ya decía yo. Demasiado fácil parecía. 01:36:39

Pero no es difícil, ¿eh? O sea, al final es meter una imagen ahí en medio. O sea, mira, te voy a decir cómo está hecho eso. Eso está, espera que pongo de aquí. Eso lo puse así en los títulos de los temas. Guardar acá, no, cancelar. Sí, es que lo cogí con muchas ganas. Ya voy haciendo menos gilipolleces. 01:36:42

esta, vale 01:37:03

esto está hecho, a ver, esto tiene un truco 01:37:10

esto tiene dos trucos, habrá un truco que también os quería contar 01:37:13

pero bueno, es que hay que parar en algún momento 01:37:15

para quieto 01:37:16

con 01:37:19

bueno 01:37:20

no, no va, va a saltos, joder 01:37:22

ahí, vale 01:37:29

método científico, entonces 01:37:38

esta 01:37:41

dentro de la unidad 1 01:37:42

está hecha de la siguiente manera, vale 01:37:45

editar el tema, o sea, está en 01:37:46

lo que es el tema, no es una etiqueta, es 01:37:52

la explicación del tema, entonces cuando tú pones aquí 01:37:54

unidad 1, ¿vale? Luego abajo le puedes poner un resumen, eso está 01:37:58

metido en el resumen, ¿vale? Y está hecho de la 01:38:01

siguiente manera, ¿vale? 01:38:04

Tiene un párrafo, ¿vale? 01:38:08

Y entonces luego tiene, esto es cuando metes 01:38:10

en insertar imagen, cuando insertas imagen, el 01:38:13

El código de buscar en una dirección web es A, ¿vale? 01:38:16

Desde A, como veis aquí, desde A hasta A, ¿vale? 01:38:22

Entonces, el A yo lo he puesto, esto lo he trampeado yo a posta, 01:38:26

para que toque donde toque, del muñeco, o sea, en cualquier zona que toque me responda el ratón. 01:38:32

El responsive, que decíais antes, pues está, o sea, si yo genero, mira, 01:38:38

lo voy a poner de otra manera 01:38:44

hola 01:38:46

aquí 01:38:49

voy a poner 01:38:50

un enlace 01:38:52

¿vale? entonces 01:38:54

si yo quiero poner, para poner un enlace 01:38:56

lo tienes que hacer desde aquí, si yo quiero poner un enlace 01:38:58

si yo pongo aquí un enlace 01:39:01

marco, ¿no? y le digo 01:39:03

insertar enlace, que es aquí arriba 01:39:05

a una imagen 01:39:06

que sea una imagen que 01:39:08

examina repositorios 01:39:10

A ver si encuentro una imagen ahí rápidamente 01:39:13

Seleccionar archivo 01:39:14

Si de todo esto no sabéis hacer algo 01:39:16

Pues también me decís y otro día 01:39:19

A ver, tengo por aquí 01:39:21

Algunas imágenes 01:39:23

Tutorial 01:39:24

¿Dónde está? 01:39:26

¿Puedes? 01:39:32

Imagen, aquí 01:39:33

Imágenes, ¿qué imágenes? 01:39:33

Nada, es que imágenes 01:39:37

Ninguna 01:39:38

Este es el ordenador del Instia 01:39:39

Aquí tengo pocas mierdas 01:39:42

álbum de cámara, a ver, venga 01:39:43

pues yo me quiero poner mi imagen 01:39:46

¿vale? abrir 01:39:48

¿vale? pues ya está, entonces subir este archivo 01:39:49

¿vale? 01:39:52

entonces cuando miráis el HTML 01:39:54

de lo que ha pasado 01:39:56

¿vale? veis que genera 01:39:57

el A, lo que os decía ¿no? 01:40:00

la etiqueta es A y va desde aquí 01:40:02

pone siempre primero la referencia 01:40:04

que es el HTTPS bla bla bla 01:40:07

todo eso lo que genera 01:40:08

y luego voy a poner, bueno me lo frito 01:40:10

con el culo y aquí termina, ¿vale? 01:40:12

Claro, si yo quiero que ese A 01:40:15

me coja todo o yo, por ejemplo, las etiquetas 01:40:16

lo pongo que me coja hasta 01:40:19

el borde. ¿Qué hago? Eso lo pongo 01:40:20

fuera y la etiqueta la anido 01:40:23

dentro. O sea, entre A y A 01:40:25

es donde meto la etiqueta 01:40:26

con su borde, con su margin, con su 01:40:28

padding. Entonces, hay veces 01:40:30

que me interesa, por ejemplo, 01:40:32

pues eso, que haga como aquí, ¿vale? 01:40:34

Aquí me interesa que yo pince donde 01:40:36

pince. Bueno, ahora no se ve 01:40:38

porque la estoy editando, ¿vale? 01:40:40

pero accede 01:40:42

al tema 01:40:50

desde cualquier sitio que lo pinche 01:40:51

porque yo tengo los temas 01:40:54

en principio los tengo cerrados 01:40:56

cuando no estamos editando para que no salga 01:40:57

toda la reta hila 01:41:00

o sea si yo dejo de editar 01:41:01

salir de edición 01:41:05

salir de edición te estoy diciendo 01:41:06

please 01:41:08

si yo desactivo la edición 01:41:09

venga bonito 01:41:15

mira que os decía, estas etiquetas 01:41:18

Vicky, que me las pusiste tú, están pegaditas. El borde azul con el borde amarillo. Y simplemente es meterle un BR aquí en medio y ya está. Vale, entonces, lo que decía, aquí, claro, como los temas están cerrados, los alumnos se volvían locos para abrirlo porque ellos tendrían a pinchar por aquí. 01:41:27

Y le tuve que poner el enlace, o sea, el enlace aquí es el mismo que la unidad 1, es decir, abre la unidad 1, ¿vale? Pero para que veáis que yo ponga donde ponga el ratón, me sale la línea, ¿vale? En el muñecot, en tal, porque está puesto AA y la imagen, método científico, color rojo, todo eso está dentro del AA, ¿vale? 01:41:48

O, por ejemplo, aquí, por ejemplo, estas etiquetas que tengo aquí, ¿vale? Que estas quedan muy bonitas. Cuando queréis hacer así varias cosas, varias posibilidades, como una especie de menú o algo así, queda muy chulo hacer esto. 01:42:11

estas de aquí 01:42:34

o a mí por lo menos me gustan un montón 01:42:36

luego ya sabéis que 01:42:38

estas 01:42:40

estas, vale 01:42:42

tengo aquí un tutorial 01:42:49

aquí otro tutorial, aquí otro tutorial 01:42:50

claro, para que esto quede un poco estético 01:42:52

esto lo hice con el degradado 01:42:54

de ese de colores que os he enseñado, o sea, yo me ponía 01:42:57

un marrón y el mismo marrón 01:42:58

o sea, en la transición al blanco 01:43:00

me cogía el penúltimo, o sea, uno muy clarito 01:43:02

muy clarito, pero en marrón 01:43:05

aquí es el mismo 01:43:06

purple pero en la versión 01:43:08

clarita y entonces las etiquetas 01:43:10

pues quedan bien porque si le metes un otro 01:43:12

contraste y tal pues no 01:43:14

queda tal, entonces aquí 01:43:15

yo puedo pinchar en este lado, o sea no hace falta 01:43:17

que pinche en el texto, yo pincho aquí 01:43:20

y accedo al tutorial este 01:43:22

veis que puedo que me sale la manita 01:43:23

desde cualquier lado y estas etiquetas 01:43:26

por ejemplo no tienen 01:43:28

break porque aquí sí que me 01:43:30

interesaba que me quedaran juntitas 01:43:32

y entonces aquí veis que están mucho más juntas 01:43:33

que además este es el espacio natural 01:43:37

que dejas y no ponéis break 01:43:38

las pega mucho 01:43:40

y ya de verdad que os perdono 01:43:41

además que ya son las 4 01:43:44

ya no me brojó muy bien 01:43:49

yo dije si me he enterado 01:43:54

y la biblia 01:43:55

eso del html tiene un pintón 01:43:57

está muy bien, buen descubrimiento 01:43:58

porque luego yo en realidad no lo empecé 01:44:02

a usar para eso, en realidad lo empecé a usar 01:44:05

porque yo les puse apuntes 01:44:07

les empecé poniendo 01:44:09

muchos apuntes 01:44:11

en insertar página 01:44:12

página de 01:44:15

de las funciones 01:44:17

de EducaMadrid y en libros 01:44:19

¿por qué? 01:44:21

porque meterles un PDF 01:44:23

me generaba un problema 01:44:24

yo como creo que casi todos nosotros 01:44:26

continuamente estamos cambiando cosas 01:44:29

entonces ponías un PDF 01:44:30

y estabas ahí y lo ponías a explicar 01:44:32

y veas que no entendía una mierda, venga, vale, lo cambio 01:44:34

entonces, ¿cómo lo tenía que cambiar? Me tenía que 01:44:37

ir al Word, cambiarlo en el Word 01:44:38

pasarlo a PDF 01:44:40

el PDF cambiarlo, es un coñazo 01:44:42

que tienes un PDF en el 01:44:44

aula virtual, hay una manera rápida 01:44:47

de cambiarlo, pero también hay que sabérselo y no sé qué 01:44:49

entonces, al final 01:44:51

dije, joder, y entonces empecé a escribir, claro, ¿qué pasa? 01:44:52

que en matemáticas 01:44:55

al hacer tablas 01:44:56

al hacer no sé qué, pues claro, eso 01:44:58

el editor ese es súper limitado 01:45:00

tiene insertar tabla, pero la tabla que te inserta 01:45:02

para empezar te la inserta siempre con una 01:45:05

cabecera y con una 01:45:07

primera fila donde va todo 01:45:09

en negrita, por narices 01:45:11

entonces claro, para 01:45:12

destripar la tabla y hacerla a mi 01:45:14

manera, pues fue cuando empecé a 01:45:16

mirar, entonces vas mirando, mirando, mirando 01:45:18

y luego digo, bueno, pues vale, aprendí a hacer 01:45:21

colores, pues las etiquetas les pongo colores 01:45:22

al principio las etiquetas eran esto corrido como las 01:45:24

hacemos todos 01:45:26

Bueno, estás fenomenal 01:45:27

pues 01:45:30

es que aquí en el centro 01:45:31

hace un frío de carajo, no sé por qué 01:45:35

será porque en el piso de arriba 01:45:37

no había calefacción hasta hoy 01:45:38

que la ha arreglado Paco en la cerradura 01:45:40

pero es horrible 01:45:42

ya veis a Raúl aterido y a mí también 01:45:44

o sea, tengo la nariz 01:45:46

como un caramba, ¿no? 01:45:48

qué horror 01:45:50

y las rodillitas 01:45:50

que bien, que ha estado muy 01:45:53

a mí me ha estado muy interesante 01:45:56

a ver 01:45:57

bueno, de todas maneras 01:46:00

he hecho la grabación 01:46:02

se empieza cortando y pegando 01:46:03

vale, no, no, eso 01:46:06

pero bueno, yo donde se encuentran los problemas 01:46:07

y luego voy a ir, ahora cómo arreglo esto 01:46:09

los colores, que ya me lo has dicho 01:46:11

eso he buscado y ya he visto 01:46:13

bueno, luego nos has puesto tú lo de la Biblia 01:46:16

pero lo estoy buscando en Google, colores HTML 01:46:17

hola, 500 01:46:20

140 con nombre 01:46:21

que 01:46:23

cuando acabe la grabación 01:46:25

la subo luego a la MediaTek 01:46:27

que la comparto en el seminario 01:46:29

vale 01:46:31

y que el jueves próximo 01:46:32

es cuando tenemos ponente externo 01:46:35

con lo de 01:46:37

el libro de evaluación y eso 01:46:38

no se llama libro, bueno 01:46:41

estoy mucho frío, no puedo pensar 01:46:44

no he comido 01:46:47

fenomenal 01:46:47

ahora tengo que parar de grabar para que no se pierdan 01:46:50

ya, va 01:46:53

Etiquetas muy chulas en Moodle - Contenido educativo

Del mismo autor…

Un comienzo inolvidable

COnstruye con Nezha una farola programando con MakeCode su sensor de luz.

Crea un sesión en tu ordenador para proteger la información de tu clase.

Vídeo cumpleaños

Vídeo Cumpleaños

Navidad 25-26

Cuentacuentos 25-26