Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

VS Code - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 26 de octubre de 2024 por Pedro Luis L.

27 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, vamos a ver un editor de texto que actualmente se usa muchísimo, que es el Visual Studio Code. 00:00:00
Visual Studio Code nos viene como en dos versiones. 00:00:10
Por un lado, el Visual Studio que nos da Microsoft, y luego la gente ha hecho una versión que se llama Visual Studio Code, 00:00:14
que lo que hace es que quita gran parte de la telemetría que nos mete Microsoft. 00:00:22
Microsoft, a su versión, le mete telemetría, le mete extensiones, que a determinados usuarios no le gustan. 00:00:30
Bueno, pues Codium lo que hace es coger esa versión de Visual Studio y le quita esa telemetría. 00:00:38
Una curiosidad es que Visual Studio Code está escrito en HTML y Javascript. 00:00:45
Una curiosidad es que si yo cojo cualquier navegador web y me voy a la parte de herramientas para desarrolladores, 00:00:53
aquí en el inspector voy a poder ver cualquier elemento, veis aquí abajo, aquí abajo me indica cualquier elemento de la página web. 00:01:04
Esto va a pasar también en el Visual Studio porque es una página web. 00:01:17
Bueno, vamos a descargarlo e instalarlo. 00:01:22
Bueno, estas son las dos páginas del Visual Studio y del Visual Studio Codium y bueno, en Windows y en Macintosh nos descargamos el paquete y lo instalamos, en Linux nos podemos ir a gestión de paquete e instalarlo gráficamente, que también hay gestor de paquetes gráfico, o podemos ejecutar estas instrucciones en la consola. 00:01:24
esto para el Visual Studio Code 00:01:51
y estas, que si os fijáis 00:01:53
son las mismas, cambiando aquí 00:01:56
son las mismas instrucciones 00:01:57
prácticamente 00:01:59
cambiando aquí code por codium 00:02:00
y entonces nos instala 00:02:04
bueno, esto es un menos menos 00:02:06
aquí hay una errata 00:02:07
eso es menos menos 00:02:08
bueno pues 00:02:11
aquí con este código 00:02:12
no instala en el Visual Studio Code o el codium 00:02:15
hay una tercera forma 00:02:18
de instalar el Visual Studio Codium 00:02:19
nos permite instalarlo sin tener 00:02:21
permisos de instalación, o sea, lo que tenemos 00:02:25
que hacer, sin permisos de 00:02:27
sin tener permisos de administrador 00:02:29
lo que tenemos que hacer es coger 00:02:31
irnos aquí a la página 00:02:33
del Visual Studio Codium, le damos 00:02:35
aquí a instalar, nos da aquí la opción 00:02:37
de descargar y cuando 00:02:39
vamos a la opción de descargar 00:02:41
nos lleva a esta página 00:02:43
nos lleva a esta página, voy a recargarla 00:02:44
un momentito que la recargo 00:02:47
esta página me salen aquí 00:02:49
todas las arquitecturas, bueno, me salen casi todas las arquitecturas 00:02:51
que soporta, esto hay un script 00:02:54
que genera todas estas arquitecturas 00:02:56
y me dice que tengo aquí 00:02:58
130 más 00:03:00
perdón, mostrar los 130 00:03:01
bueno, aquí están las distintas arquitecturas 00:03:04
yo tengo que buscar mi sistema operativo 00:03:06
y mi 00:03:08
y mi procesador adecuado 00:03:10
bueno, pues veis que aquí hay para 00:03:12
AMD 64, que son los Intel 00:03:14
x86 64 00:03:16
también son los procesadores de Intel 00:03:18
AMD, ARM64 00:03:20
este es el típico procesador 00:03:23
que llevan los móviles 00:03:25
ARM 00:03:25
voy bajando, bueno 00:03:27
Darwin son los Macintosh 00:03:30
¿de acuerdo? Linux 00:03:33
Linux para ARM, es decir, móviles 00:03:34
Linux para 00:03:37
RIS 564 00:03:39
pues Linux para RIS 564 00:03:42
y me interesa 00:03:43
esta 00:03:44
bueno, si estoy en Linux, bajarme la Linux 00:03:45
x64, x64 00:03:48
también son los procesadores de Intel, ya me dé 00:03:50
y bueno 00:03:52
y la versión, tengo que cogerme la 00:03:54
en este caso la de Linux o la de Windows 00:03:56
cojo y me la descargo, cuando me la descargo 00:03:58
me sale 00:04:00
bueno, un paquete 00:04:02
que tengo que descomprimir y al descomprimirlo 00:04:04
me sale esto 00:04:06
esto si os fijáis pone Chrome 00:04:07
claro, es que es el Google Chrome 00:04:09
este programa 00:04:11
está escrito en una cosa que se llama Electron 00:04:14
que el Electron consiste en cogerse un Google Chrome 00:04:16
y quitarle todas las decoraciones 00:04:18
le quitamos la barra de navegación 00:04:20
solamente le vamos a dejar 00:04:23
la barra de menú para poner menús 00:04:24
y luego ya nos sale la página web 00:04:26
si lo arrancamos, este está 00:04:27
inmaculado, cuando lo arranco por primera vez 00:04:30
fijaos que facilón 00:04:32
o sea, no tengo que hacer cosas raras 00:04:34
simplemente cojo y me descargo el paquete 00:04:36
y doy aquí en código 00:04:38
y cuando le apetece, bueno lo he abierto dos veces 00:04:39
cuando le apetece, se abre 00:04:41
del Visual Studio Code 00:04:44
a ver, va despacillo 00:04:45
bueno, aquí lo tengo 00:04:47
bueno, lo primero que voy a aprender 00:04:50
lo primero que voy a aprender 00:04:52
me vengo aquí 00:04:55
estos son mis apuntes, bueno, el zoom 00:04:58
puedo ampliar y reducir 00:05:00
el tamaño de letra con control más o control menos 00:05:02
si hago control más 00:05:04
amplio el tamaño de letra y lo voy a dejar aquí 00:05:05
bastante grande para que se vea bien en el vídeo 00:05:08
o control menos lo reduzo 00:05:10
eso yo con control más o control menos 00:05:12
lo cambio, lo primero que me sale 00:05:14
cuando lo 00:05:16
instalo 00:05:17
es que si quiero cambiar el color, si lo voy a poner 00:05:19
en blanco, que de cada vídeo se me 00:05:22
ve mejor, vosotros ponerlo en el color 00:05:25
que queráis, lo que más os guste, de hecho 00:05:26
hay un montón aquí de temas, si le dais aquí 00:05:28
te sale un montón de temas que te pueden 00:05:30
interesar, vale, aquí te pone 00:05:32
también un montón de 00:05:34
puntos que puedes ir haciendo 00:05:36
para 00:05:39
tunear 00:05:40
tu editor 00:05:42
¿de acuerdo? pues lo cogéis y lo tuneéis 00:05:44
a vuestro gusto, yo con esto 00:05:46
de momento me valgo 00:05:48
vamos aquí a cerrar el webcom 00:05:49
y vamos a ver, bueno, las características 00:05:51
bueno, me salen aquí una serie de iconos 00:05:56
¿de acuerdo? 00:06:00
este es el explorador, si abro una carpeta 00:06:01
si abro una carpeta 00:06:04
busco aquí la carpeta 00:06:06
venga, ábrete 00:06:08
sesamo, voy a ver 00:06:09
una carpeta que ya me he preparado aquí 00:06:11
Si hago una carpeta, venga, ábrete, aquí, me salen los archivos de esa carpeta. 00:06:13
Puedo hacer cosas con ellos, ¿de acuerdo? 00:06:23
Vale, bueno, he intentado abrir un PDF, que no quiero abrir un PDF. 00:06:28
Si pincho en ellos, pues vamos a ver que se abren, ¿de acuerdo? 00:06:31
Ahí se me abren los archivos, ¿vale? 00:06:34
¿De acuerdo? 00:06:37
Vamos a ver características que tiene el editor. 00:06:42
Bueno, la primera característica interesante que tiene es la división de vista. La vista múltiple. ¿La vista múltiple en qué consiste? Bueno, pues, ¿veis aquí este icono de aquí? Bueno, pues si lo pincho, este documento que estoy viendo aquí, bueno, estas cosas las puedo quitar y poner simplemente haciendo clic. 00:06:44
¿De acuerdo? Si le hago clic se pone y si hago clic se quita. 00:07:04
Lo voy a dejar quitado para que sea más cómodo. 00:07:07
Bueno, la vista múltiple, como veis, me está mostrando el mismo documento. 00:07:09
Si yo vengo aquí y tecleo algo, vais a ver que sale en las dos partes, en los dos visores. 00:07:13
¿Esto para qué es? Esto me sirve para ver el mismo documento. 00:07:18
¿Lo veis? Puedo ver el mismo documento en dos partes distintas. 00:07:24
O sea, yo podría tener aquí un documento grande, trabajar en dos partes a la vez, del mismo documento. 00:07:27
Por ejemplo, aquí podría tener la cabecera de, si fuese un HTML, aquí podría tener la cabecera, aquí el cuerpo y ver la cabecera y el cuerpo a la vez, para tocar temas de CSS y demás. 00:07:32
Voy a dejar como estaba. 00:07:44
Vale, la vista, la vista, aquí la he separado en vertical, pero también se puede separar en horizontal. 00:07:46
Cuando pones aquí el ratón te dice pulsa alt para hacerlo en horizontal, pues pulso alt y hago clic. 00:07:54
Y veis que ha hecho la separación de vista en horizontal. Esto se usa muchísimo, o sea, lo habitual es tener abiertos varios documentos, sobre todo ahora que las pantallas son muy grandes, pues la idea es tener aquí, por ejemplo, un documento, aquí puedo abrir yo ahora, fijaos que tengo seleccionado este, aquí, si yo digo abrir y me hace caso, pues puedo abrir otro documento, ¿veis? He abierto dos documentos aquí. 00:08:01
Bueno, pues aquí tener documento, un documento, aquí tener otro, tener varios documentos abiertos y trabajar con ellos a la vez. 00:08:27
¿Cómo lo voy a dividir? Pues, bueno, fijaros que cuando pincho aquí, puedo cambiarles, predimensionar y demás. 00:08:40
Los voy a dividir según me vaya interesando. ¿Qué quiero cerrar una vista? 00:08:47
Quiero cerrar estas dos vistas. Bueno, voy cerrando los archivos y la vista se cierra. 00:08:51
Si cierro los archivos, la vista se cierra. Voy a dejar solamente una vista. 00:08:56
Que me interesa ahora para trabajar. 00:09:00
¿Qué más opciones interesantes tiene? 00:09:02
Bueno, tiene la edición en bloque. 00:09:04
Edición en bloque. 00:09:07
Fijaros, vamos a pulsar mayúsculas al y las flechas de arriba y abajo. 00:09:08
Esto es interesante. 00:09:12
Por ejemplo, me vengo aquí. 00:09:14
Voy a abrir varias líneas. 00:09:18
Y puso mayúsculas al. 00:09:20
Y muevo el cursor. 00:09:22
¿Veis lo que está pasando? 00:09:24
¿Veis? 00:09:27
Puedo escribir lo mismo en varias líneas a la vez. 00:09:28
O borrar varias líneas a la vez. 00:09:31
Esto viene muy bien para comentar código, o sea, yo podría tener aquí varias líneas de código, ¿de acuerdo? Para salir de este modo hay que pulsar escape, ¿de acuerdo? O sea, para activarlo es mayúscula sal y las flechas de arriba y abajo, aquí ya lo tengo activado en cuatro líneas y ahora aquí pues puedo editar estas cuatro líneas a la vez. 00:09:32
Fijaos, imaginaos que quiero meter un comentario. Quiero comentar esto por la razón que sea, pues lo comento. Comentado. Vista de idea, más cositas. Bueno, CTRL-S para guardar, como todos los editores, tiene también un guardado automático. 00:09:55
añadir o quitar comentarios 00:10:11
bueno, aquí he metido yo un comentario 00:10:14
a mano, pero con control 00:10:15
K, C se añaden comentarios 00:10:18
y con control K, U 00:10:20
se quitan comentarios 00:10:22
voy a abrirme mejor 00:10:23
un documento en Java, que ahí se ve muy bien 00:10:25
en Java se ve muy bien 00:10:27
tengo un documento en Java 00:10:30
y quiero comentar estas dos líneas 00:10:31
pues las marco 00:10:34
las selecciono 00:10:35
y te creo 00:10:37
Control-K 00:10:38
y en el momento que he pulsado Control-K 00:10:42
aquí abajo, me dice 00:10:43
Control-K ha sido presionado. 00:10:45
Ahí se ha ido. 00:10:48
Control-K ha sido presionado, esperando para la segunda tecla. 00:10:49
Pues Control-K 00:10:52
y ahora no me acuerdo la tecla, Control-K-U 00:10:53
o Control-K-C. 00:10:55
Control-K-C 00:10:57
y ha añadido un comentario. ¿Lo veis? 00:10:59
Que ha añadido el comentario. 00:11:01
Y luego Control-K-U 00:11:02
y quito el comentario. 00:11:05
O sea, con control K, C, añado, control K, U, lo quito. Esto es muy rápido y muy eficiente cuando se está editando código. Se usa muchísimo. 00:11:07
Autocompletado. Bueno, el editor por sí mismo ya incluye autocompletado. Muchos editores, según vas escribiendo, bueno, aquí, a ver, no me funciona el autocompletado. 00:11:21
a ver, no me está funcionando 00:11:36
el autocompletado 00:11:40
el autocompletado 00:11:40
ahí, mira, autocompletado, ¿veis? 00:11:43
he puesto main, bueno, he puesto 00:11:47
m, y me está autocompletando 00:11:49
este main, esta función 00:11:52
main 00:11:53
si la guardo, pues 00:11:54
me puedo autocompletar palabras que ya he escrito 00:11:57
¿veis? 00:11:59
me ha autocompletado ahí esa palabra 00:12:01
que he escrito, palabras que ya he escrito 00:12:03
las puede autocompletar, ¿vale? 00:12:05
más cosas interesantes 00:12:07
snippets 00:12:09
o plantillas de código 00:12:11
esto está muy interesante, es muy muy muy interesante 00:12:14
para activarlo 00:12:16
tenemos que ir a File 00:12:20
Preference 00:12:21
y veis que aquí pone Configurar Snippets 00:12:23
Configurar Snippets 00:12:26
Configurar plantillas 00:12:28
doy aquí a la plantilla y me dice 00:12:29
donde quiero meter yo la plantilla 00:12:32
mira, la voy a meter en HTML 00:12:34
Entonces busco aquí HTML, que estará por algún sitio. 00:12:36
Mira, aquí HTML, hay que meter en HTML la plantilla. 00:12:41
Y me pone esto, ¿de acuerdo? 00:12:44
Me pone esto. 00:12:48
¿Cómo funciona esto de las plantillas? 00:12:51
Muy fácil. 00:12:52
Mira, lo que voy a hacer es que voy a teclear unas palabras. 00:12:54
En este caso está poniendo log. 00:13:00
Y él automáticamente me va a añadir todo este código que he puesto aquí. 00:13:01
¿Vale? Vamos a verlo en funcionamiento. 00:13:07
Fijaos, me pone aquí un ejemplo 00:13:09
Según entras ahí, te pone un ejemplo 00:13:10
Lo vamos a copiar 00:13:12
Esto hay que hacerlo así 00:13:15
Se copia 00:13:17
Se pega, esto está pensado 00:13:17
Para hacerlo así 00:13:20
Para quitar los comentarios 00:13:21
Control K U 00:13:24
Le quito el comentario 00:13:26
Y ahora, bueno, voy a usar este comando 00:13:27
Este ejemplo que me viene aquí 00:13:30
Lo guardo, me voy a mi documento 00:13:31
HTML 00:13:35
Bueno, fijaros 00:13:36
esta plantilla 00:13:37
se llama print to consola 00:13:40
imprimir a la consola 00:13:42
y se dispara con log, tengo que escribir 00:13:44
log para que se dispare 00:13:46
entonces me voy aquí 00:13:48
escribo log 00:13:49
¿lo veis ahí? 00:13:52
log, print to consola 00:13:56
entonces pulso intro 00:13:57
y ha puesto, fijaros que ha puesto 00:14:00
exactamente 00:14:03
si veis que pone console.log 00:14:04
lo que sea, ha puesto exactamente 00:14:06
este código de aquí 00:14:08
si os fijáis, ha puesto este código de aquí 00:14:10
ahora vamos a ver un poquito más en detalle 00:14:13
pero ha puesto exactamente ese código 00:14:15
de ahí, aquí veis que pone un $1 00:14:17
y un $2, fijaos que ha puesto 00:14:19
el cursor en la posición 00:14:21
del $1, aquí puedo escribir 00:14:23
y si pulso tabulador 00:14:25
ah, se me ha desactivado 00:14:27
la plantilla, espera, vuelvo a darle 00:14:29
que después de un tiempo 00:14:31
se desactiva, log 00:14:33
aquí puedo escribir algo 00:14:35
y si pulso tabulador, salto a la segunda posición. 00:14:37
¿Veis? Tenía $1 y he saltado a $2. 00:14:42
Esta plantilla viene de ejemplo. 00:14:46
La voy a modificar, yo voy a hacer algo más útil. 00:14:48
Esto viene de ejemplo, vamos a hacer algo más útil. 00:14:51
Vamos a llamarla, yo qué sé, lista. 00:14:55
Quiero introducir una lista. 00:14:59
Y la voy a llamar ls. 00:15:01
Esta plantilla se va a disparar cuando teclee ls. 00:15:02
Voy a hacer primero solamente una fila. Perdón, una línea. Cuando son plantillas de una sola línea, pues pongo, abro comillas, pongo el texto y cierro comillas. Vamos a hacer una sencillita. 00:15:05
Que ponga, las listas se ponen en HTML con UL, las listas desordenadas. 00:15:18
Vamos a poner que ponga esto. 00:15:25
De acuerdo, pone aquí en la descripción, pone introducir lista. 00:15:28
Introducir lista. 00:15:37
Me voy a guardar, me voy aquí a la ULHTML, voy a borrar aquí un poco. 00:15:41
Y cuando pongo ls, ¿veis que ahí? Ya ha puesto ls. 00:15:47
Pulso intro. 00:15:52
Y ha puesto simplemente la plantilla que yo le he dicho. 00:15:53
Ha puesto ul, ul. 00:15:56
¿Lo veis ahí? 00:15:58
Ha puesto exactamente esto. 00:16:00
Ul, ul. 00:16:01
O sea, la plantilla, este es el nombre de la plantilla, 00:16:03
se dispara con el prefijo, con esto, 00:16:06
y aquí pongo lo que quiera que me ponga el editor. 00:16:08
Bueno, y esto de introducir lista es la descripción 00:16:11
que quiero que me salga cuando yo escriba aquí. 00:16:12
¿Veis? Bueno. 00:16:17
Aquí en un sitio 00:16:18
Hay un sitio que me dice 00:16:21
Ahí está 00:16:21
¿Vale? 00:16:23
Aquí me dice la descripción 00:16:23
¿De acuerdo? 00:16:25
Vamos allá 00:16:29
Imaginaros que yo quiero que el cursor 00:16:30
Me lo ponga aquí 00:16:33
Nada más empezar 00:16:34
Pues pongo 00:16:36
$1, $2, $3 00:16:37
En las posiciones en las que quiero 00:16:39
Que me vaya pulsando 00:16:41
Poniendo el cursor 00:16:42
Si me voy aquí 00:16:44
Y tecleo el S 00:16:45
y pulso intro. Ahora el cursor me lo ha puesto 00:16:47
ahí. ¿De acuerdo? Pues yo escribo 00:16:50
pulso tabulador y ya 00:16:51
me salta al final. 00:16:54
¿Vale? Hay un 00:16:56
dólar de estos que es especial. 00:16:58
Mirad, fijaros, aquí tengo el dólar 1. 00:17:00
Puedo poner 00:17:03
un dólar 2, un dólar 3. Voy a poner varias líneas. 00:17:03
Para poner varias líneas 00:17:06
se hace con coma. 00:17:07
No sé si pongo coma. 00:17:09
Bueno, esto es como si fuese 00:17:11
una matriz en Javascript. De hecho es una matriz 00:17:13
en Javascript, pero bueno. 00:17:15
una lista en Javascript, lo que hago es que pongo los valores entre comillas 00:17:17
y luego coma para separar valores, ¿vale? 00:17:22
Si yo lo pongo así y ejecuto la plantilla, veis que como lo ha puesto ahora, ¿no? 00:17:25
Ha puesto las dos líneas. 00:17:35
Bueno, voy a borrar todo esto, de hecho voy a borrar todo para que se vea mejor la plantilla, ¿vale? 00:17:37
Veis que lo ha puesto, ya no lo ha puesto a continuación, 00:17:46
lo ha puesto primero en una línea y luego en la otra línea. 00:17:49
Imaginaros que yo quiero ahora 00:17:52
Meter un elemento de la lista 00:17:55
En HTML se meten con li 00:17:57
Barra li 00:17:58
¿De acuerdo? 00:18:01
Y aquí pongo el elemento $1 00:18:03
El segundo elemento de la lista 00:18:05
Entonces $2 00:18:09
Y voy a meter un tercero y un cuarto 00:18:16
Y $4 00:18:21
He puesto cuatro elementos en la lista 00:18:25
Bueno, pues si ahora vengo aquí 00:18:28
Y tecleo ls 00:18:30
Y le doy 00:18:32
Bueno, tengo el elemento número 1, tengo el número 1, tabulador, me salto al número 2, aquí escribo lo que me dé la gana, estoy escribiendo yo el número 2, aquí salto al número 3 y aquí salto al número 4 y si vuelvo al tabulador pues ya me va a la última posición. 00:18:33
Hay un elemento especial que es el $0. El $0 es donde quiero que acabe el cursor. O sea, cuando acabe de pulsar los TAB, él normalmente me lo está poniendo el cursor al final aquí. 00:18:51
Pero puede ser que yo quiera que me lo ponga el cursor en otro sitio. Imaginaos que yo quisiera, por la razón que fuera, que me pusiese el cursor aquí. 00:19:04
Y al final, cuando acabo, pues pongo $0, fijaros. Si pongo eso, voy a deshacer, me he pasado deshaciendo, bueno, pues si pongo ls y le doy, estoy en la posición $1, me salta a la posición $2, a la 3, a la 4, y ahí está la posición $0, ¿de acuerdo? 00:19:12
O sea, cuando ya acaba la plantilla me va a la posición dólar 0, que es esta que he puesto aquí. ¿Qué pasa si repito y pongo aquí dos veces dólar 1? De hecho, lo voy a poner, voy a dejarlo como estaba, voy a poner aquí dólar 1. Aquí, dólar 1, lo voy a poner ahí. 00:19:35
¿Qué pasa si repito un dólar uno, un dólar dos, un dólar lo que sea, en dos sitios? 00:19:59
Voy a poner aquí el dólar uno y aquí el dólar dos. 00:20:04
¿De acuerdo? 00:20:07
Lo repito, por la razón que sea. 00:20:08
Bueno, pues si lo repito, pasa lo siguiente. 00:20:10
Aquí estoy el dólar uno, ¿no? 00:20:18
Pues cuando escribo, ¿veis que lo repite en los dos sitios? 00:20:19
O sea, en el dólar uno lo había puesto aquí y lo había puesto aquí. 00:20:22
Pues me lo pone en los dos sitios. 00:20:26
Siguiente, el dólar dos. 00:20:28
El dólar dos he puesto que lo ponga aquí y lo ponga aquí. 00:20:29
De hecho, me está diciendo ya los cursores, si os fijáis, que ya están las dos posiciones. 00:20:30
Pues me los copia. 00:20:34
Hago el dólar 3 y hago el dólar 4. 00:20:36
¿De acuerdo? 00:20:39
¿Qué más cosas puedo hacer? 00:20:42
Puedo poner valores por defecto. 00:20:44
Se pueden poner valores por defecto. 00:20:46
Bueno, voy a quitar los valores repetidos. 00:20:50
Los valores por defecto se ponen haciendo lo siguiente. 00:20:54
O sea, ponen dos llaves, dos puntos y el valor por defecto. 00:20:57
Aquí voy a poner 00:21:00
Número 1 00:21:02
Aquí voy a poner otro valor por defecto 00:21:04
Que sea 00:21:09
Segundo 00:21:10
Ahí lo tengo 00:21:11
Segundo 00:21:16
Y lo guardo 00:21:18
Bueno, pues ahora cuando lo ejecuto 00:21:20
Mi plantilla 00:21:24
¿De acuerdo? 00:21:28
Fijaos, me ha puesto los valores por defecto ya 00:21:32
Directamente 00:21:34
Y me lo marca entero 00:21:34
Me lo marca entero 00:21:36
Si yo quisiera dejar ese valor 00:21:38
Pusaría tabulador 00:21:39
Y me salta ya el siguiente valor 00:21:40
pero me lo marca entero para que yo escriba lo que quiera 00:21:41
¿vale? el tercero 00:21:44
y el cuarto, el final 00:21:46
lo repito 00:21:48
si así lo hago, pulso tabulador 00:21:49
tengo el valor por defecto 00:21:52
si escribo algo 00:21:54
lo puedo cambiar 00:21:56
¿de acuerdo? si pulso tabulador salto al siguiente 00:21:57
que no lo voy a cambiar, tabulador 00:22:00
y salto al siguiente, etc, etc, etc 00:22:01
más cosillas 00:22:04
más cosillas 00:22:07
imaginaros que quiero meter otra 00:22:08
otro elemento 00:22:11
quiero meter, pues aquí he metido 00:22:13
aquí el ls, pero quiero meter otro, imaginaos 00:22:16
que tengo un css que uso mucho 00:22:18
por ejemplo 00:22:20
por ejemplo, este es el 00:22:21
el enlace 00:22:24
de la hoja de estilos del 00:22:26
w3school y esta, pues si usáis 00:22:27
el w3school, la hoja 00:22:30
de estilos, puede ser 00:22:32
que se use mucho, bueno, pues lo que tengo 00:22:34
que hacer es 00:22:36
pongo una coma y ahora 00:22:38
me copio y pego el código 00:22:39
que ponen de ejemplo, este código 00:22:42
me lo compro y me lo pego 00:22:45
bueno, según se va aprendiendo 00:22:47
hay que aprender 00:22:51
haciendo, es buena idea cogerse 00:22:53
el editor e ir probando todas 00:22:55
estas cosas que he visto 00:22:57
hay que hacer una chuleta, ponerse a la vista 00:22:59
en algún sitio, pues yo que sé 00:23:01
en una vista separada 00:23:02
y voy viendo mi chuleta 00:23:04
¿de acuerdo? bueno, pues aquí lo tengo 00:23:06
comentado, es código comentado, podéis comentar 00:23:09
en Javascript se comenta con 00:23:11
barra, barra, en JSON se comenta con barra, barra 00:23:13
y aquí hemos dicho que para 00:23:15
quitar el código comentado 00:23:17
hemos visto aquí 00:23:19
que para quitar el código 00:23:21
comentado es control K 00:23:23
u, voy a hacer un control K u 00:23:25
control K u 00:23:26
le quito el código comentado, mira 00:23:29
esto lo voy a llamar 00:23:31
w3.css 00:23:36
que es como se llama esta hoja de estilos 00:23:39
el disparador 00:23:40
puedo poner aquí la palabra que quiera 00:23:42
voy a poner w3.css 00:23:44
Ese va a ser el disparador. 00:23:46
Voy a poner aquí el código del disparador. 00:23:48
Digo, perdón, el código que se va a poner en el disparador y va a pasar algo especial. 00:23:51
Cuando lo ponga, va a pasar algo especial. 00:23:58
Lo pongo y fijaros que aquí ya ha empezado a haber errores. 00:24:06
¿Qué está pasando? 00:24:09
Bueno, pues que este código, yo tengo que meter entre comillas el código que tiene que aparecer. 00:24:10
Pero este código ya tiene comillas de por sí. 00:24:16
Ahí veis las comillas, ¿no? 00:24:19
Ya tiene comillas. 00:24:21
¿Cómo meto comillas cuando ya tengo comillas? 00:24:21
Bueno, pues hay que hacer un escape 00:24:24
Que es barra invertida 00:24:26
¿Lo veis ahí? Es la barra de Windows 00:24:27
La barra que se usa en Windows, barra invertida 00:24:30
Cada comilla que vea, le tengo que poner 00:24:32
Una barra invertida, barra invertida 00:24:34
Barra invertida 00:24:36
Bueno, ahí está 00:24:38
La comilla final, y ya está 00:24:40
O sea, siempre que tenga un código, moraleja de esta historia 00:24:41
Siempre que tenga un código 00:24:44
Una plantilla que tenga comillas, pues tengo que poner 00:24:45
Barra invertida, comillas 00:24:48
Si la apruebo, bueno, guardo, la apruebo, pongo W3CSS, ya la tengo, ya se me dispara, ya me la pone. 00:24:49
Con esto se acaba la plantilla del código. 00:25:02
Más cositas. 00:25:06
Los plugins. 00:25:08
Bueno, los plugins, ahora los editores modernos, casi todos o prácticamente todos tienen plugins. 00:25:10
O sea, puedo ponerle extensiones que mejoran el funcionamiento del editor. 00:25:19
Antiguamente esto no pasaba, o sea, antiguamente era editor y punto. 00:25:24
O sea, tú te coges el blog de notas, el blog de notas es un editor de texto, 00:25:27
tú puedes programar en el blog de notas, es una tortura, pero se puede. 00:25:30
Y no tiene extensiones. 00:25:35
Bueno, pues actualmente prácticamente todos los editores de texto tienen extensiones, 00:25:36
y algunas muy, muy buenas. 00:25:40
Bueno, las extensiones. 00:25:41
Bueno, voy a hacer un repaso de estas cositas de aquí, 00:25:43
antes de continuar con las extensiones. 00:25:47
Bueno, este me abre el explorador, este sirve para buscar, este es WeHub, este es WeHub, si tuviese un proyecto lo podría abrir aquí, o sea, si he descargado un repositorio y abro aquí, voy a ver aquí el WeHub, ¿vale? 00:25:48
esto para errores 00:26:07
para control de errores, esto 00:26:09
el html no es un ejecutable, pero si 00:26:11
programo en java, o programo en javascript 00:26:13
puedo ejecutar, veis aquí 00:26:16
hay un menú RAM, de acuerdo 00:26:17
y puedo hacer lo que se llama 00:26:19
un debug, puedo ejecutar paso a paso para 00:26:21
encontrar errores 00:26:23
bueno, y aquí tengo los plugins, vamos a ver los plugins 00:26:24
bueno, aquí están los plugins 00:26:27
los he estado obteniendo ahora, el internet va 00:26:29
uy, la conexión que tengo 00:26:31
la conexión que tengo es un poco lenta 00:26:33
Mira, para grabar. Bueno, aquí, mira, aquí tengo las extensiones. Pues ya hay extensiones de todo. Hay extensiones para Python, para WeHab, Jupyter es un cuaderno para Python también. Por ejemplo, si instalo, este puede ser recomendable, el de Java, si vais a programar en Java. 00:26:36
Bueno, pues hay aquí un número contable 00:27:00
Aquí el RHAT, este está muy bien 00:27:02
¿De acuerdo? Si pincháis en uno 00:27:04
Te pone la descripción 00:27:06
No voy a instalar este 00:27:07
Porque es muy grande 00:27:09
Y no me vale 00:27:10
Para lo que quiero en este manual 00:27:14
Voy a instalar este otro 00:27:16
El Web Visual Editor 00:27:17
Este es un editor 00:27:20
Un plugin, lo pongo aquí 00:27:23
Lo busco, hay cientos de plugins 00:27:25
Mira, este 00:27:28
Web Visual Editor, lo instalo 00:27:29
Lo instalo. Sí, sí, confío y lo instalo. Lo instalo, lo vamos a instalar y lo vamos a desinstalar. Vamos a ver cómo se hace todo. Ya está instalado. Cuando están instalados, borro aquí, me sale el apartado de instalados. 00:27:33
¿De acuerdo? Aquí en esta ruedecita puedo deshabilitarlo por alguna razón. Bueno, aquí si quiero se actualice. Desinstalarlo. Bueno, y a veces aquí te pone los shortcuts, los atajos de teclado para trabajar. 00:27:54
O sea, aquí hay una pestañita que le das y te muestra los atajos del teclado. 00:28:14
Que hay algunas extensiones, por ejemplo, la de Java. 00:28:19
Si la instaláis vais a ver que le dais ahí. 00:28:20
Y tiene, pues, que si pulsa hasta el tecla lo ejecuto. 00:28:22
¿De acuerdo? 00:28:26
Y te digo los errores, que eso me va a interesar. 00:28:27
Bueno, pues he instalado este, el Visual Editor. 00:28:29
Voy a irse aquí para cerrar. 00:28:32
Me voy a mi página. 00:28:33
¿De acuerdo? 00:28:36
Y veis que aquí ha salido esto. 00:28:37
Estos iconos antes no existían. 00:28:39
Puedo abrir lo que se llama el Visual Editor. 00:28:42
en un lado 00:28:43
o en página completa. Le voy a decir aquí que me lo abre 00:28:44
en un lado, ¿vale? El Visual Editor. 00:28:47
Eh, tal... 00:28:50
Bueno, vamos a abrir, poner 00:28:52
bien el documento. Mira, voy a hacer 00:28:53
un HTML. Eh, otra cosa. 00:28:55
Los 00:28:59
Snippets, las plantillas de código, 00:28:59
ya tiene preparadas 00:29:02
unas cuantas en Visual Studio. 00:29:03
Tiene muchas, de hecho. En HTML, vamos, es 00:29:05
el rey. ¿Veis que aquí tiene aquí 00:29:07
esta de HTML, escrito HTML? 00:29:09
y me dice, mira, puedes ponerlo de HTML 00:29:11
HTML o este que pone HTML5. 00:29:14
Mira, pues este que pone HTML5 00:29:16
me abre, 00:29:18
bueno, me abre. 00:29:22
Bueno, es una plantilla, me está en la posición 00:29:24
$1, la $2, aquí está la $3 00:29:26
y aquí está al final. Bueno, lo que ha hecho 00:29:28
es que me ha escrito ya una página web. 00:29:30
¿De acuerdo? Aquí tal... 00:29:32
No sé por qué me está dando errores 00:29:38
ahora. Vaya, me ha fallado completamente. 00:29:39
Lo que tiene los... 00:29:42
el experimento. Bueno, 00:29:44
aquí me ha fallado 00:29:45
completamente, aquí me tendría que estar 00:29:47
saliendo lo que escribí de aquí 00:29:49
lo guardo 00:29:50
le doy, re-event 00:29:54
ok, bueno pues 00:29:56
me ha fallado más que una escopeta de feria 00:29:59
el plugin, bueno 00:30:02
este cuando funciona 00:30:04
te muestra aquí lo que vas escribiendo 00:30:07
o sea, te muestra aquí ya la página web 00:30:09
y no tienes que recargarla constantemente 00:30:11
vamos a 00:30:13
listar, mira, me ha fallado el plugin 00:30:15
vamos a desinstalarlo, me ha fallado 00:30:16
esto no estaba previsto, yo estaba previsto que funcionara 00:30:19
no ha funcionado, bueno, pues lo voy a desinstalar 00:30:22
bueno, me voy aquí 00:30:24
doy la ruedecita y le doy aquí a desinstalar 00:30:25
y desinstalo el plugin 00:30:28
¿de acuerdo? 00:30:29
me dice que tengo que reiniciar las extensiones 00:30:31
le doy 00:30:34
se reinician y ya está 00:30:35
bueno, esto se ha quedado aquí y fijaos que 00:30:39
ya me ha quitado 00:30:41
ya me ha quitado, ¿veis? 00:30:42
los iconos del visual 00:30:45
del Visual Editor 00:30:46
tiene muchas más características 00:30:48
pero bueno, ya llevamos bastante 00:30:52
para lo que es el editor 00:30:54
cuando trabajéis 00:30:56
os recomiendo 00:30:58
que probéis 00:30:59
lo que hemos visto 00:31:02
que probéis los atajos del teclado 00:31:04
me ha quedado un atajo del teclado sin contar 00:31:05
me ha quedado un atajo del teclado sin contar 00:31:07
la edición 00:31:10
vista múltiple 00:31:12
no lo he puesto 00:31:13
Ah, que no me lo he puesto. Vale, me ha quedado una cosa sin contar. Me ha quedado sin contar porque no me lo he puesto. Bueno, otra cosa que tienen la mayoría de editores es la indentación. Si yo marco esto, un texto, lo tengo marcado y pulso tabulador, ¿veis que se indenta? Y si pulso mayúsculas tabulador, se desindenta. O sea, puedo indentar y desindentar. Esto es útil para organizar el código. 00:31:16
Luego también suelen tener código... 00:31:42
Me ha hecho... Espera, que lo estoy pegando sin querer. 00:31:46
Cuando pulsáis el botón derecho del ratón... 00:31:51
¡Ah, qué pesado! 00:31:53
Quiero el botón derecho. Bueno, no me hace caso. 00:31:54
Quiero el botón derecho. 00:31:57
Bueno, cuando pulsáis el botón derecho del ratón... 00:31:58
Pero bueno, me está fallando todo. 00:32:00
Bueno, cuando pincháis el botón derecho del ratón, tiene algunas acciones. 00:32:04
Me está fallando. 00:32:09
O es ponerme a grabar y falla todo. 00:32:10
Cuando pulsáis el botón derecho del ratón, salen cosas interesantes. 00:32:14
Por ejemplo, aquí podéis hacer una selección. 00:32:17
Ah, mira, lo voy a hacer con los menús. 00:32:20
Y puedo, pues, duplicar una línea, moverla arriba, ¿ves? 00:32:23
Hay opciones que son interesantes. 00:32:26
Por ejemplo, al A arriba mueve una línea, al A abajo baja una línea, puedo duplicar una línea, ¿de acuerdo? 00:32:28
Puedo copiar una línea. 00:32:39
hay aquí opciones que son interesantes 00:32:40
usar 00:32:42
bueno, ahora sí 00:32:43
ahora sí que ya llegó el final del vídeo 00:32:46
espero 00:32:49
que le sacáis rendimiento 00:32:51
probadlo, o sea, esto solamente lo 00:32:52
lo vais a 00:32:54
aprender si lo usáis, entonces pues 00:32:56
probad a hacer una vista 00:32:58
múltiple, a una edición en bloque 00:33:01
a añadir y quitar comentarios 00:33:02
a hacer autocompletado, a hacer un snippet 00:33:05
y eso usarlo en vuestro día a día 00:33:07
a instalar plugins, bueno plugins seguramente que ya habéis 00:33:09
instalado, porque prácticamente 00:33:11
todos los profesores os obligamos a instalar plugins 00:33:13
y usalo 00:33:15
en vuestro día a día 00:33:17
Materias:
Informática
Niveles educativos:
▼ Mostrar / ocultar niveles
  • Formación Profesional
    • Ciclo formativo de grado básico
      • Primer Curso
      • Segundo Curso
    • Ciclo formativo de grado medio
      • Primer Curso
      • Segundo Curso
    • Ciclo formativo de grado superior
      • Primer Curso
      • Segundo Curso
Subido por:
Pedro Luis L.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
27
Fecha:
26 de octubre de 2024 - 20:08
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
33′ 24″
Relación de aspecto:
1.78:1
Resolución:
1280x720 píxeles
Tamaño:
64.50 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid