1
00:00:00,000 --> 00:00:09,320
Bueno, vamos a ver un editor de texto que actualmente se usa muchísimo, que es el Visual Studio Code.

2
00:00:10,339 --> 00:00:14,000
Visual Studio Code nos viene como en dos versiones.

3
00:00:14,679 --> 00:00:22,859
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,

4
00:00:22,859 --> 00:00:29,640
que lo que hace es que quita gran parte de la telemetría que nos mete Microsoft.

5
00:00:30,000 --> 00:00:37,899
Microsoft, a su versión, le mete telemetría, le mete extensiones, que a determinados usuarios no le gustan.

6
00:00:38,460 --> 00:00:44,240
Bueno, pues Codium lo que hace es coger esa versión de Visual Studio y le quita esa telemetría.

7
00:00:45,460 --> 00:00:53,539
Una curiosidad es que Visual Studio Code está escrito en HTML y Javascript.

8
00:00:53,539 --> 00:01:02,240
Una curiosidad es que si yo cojo cualquier navegador web y me voy a la parte de herramientas para desarrolladores,

9
00:01:04,769 --> 00:01:17,510
aquí en el inspector voy a poder ver cualquier elemento, veis aquí abajo, aquí abajo me indica cualquier elemento de la página web.

10
00:01:17,689 --> 00:01:21,109
Esto va a pasar también en el Visual Studio porque es una página web.

11
00:01:22,430 --> 00:01:24,750
Bueno, vamos a descargarlo e instalarlo.

12
00:01:24,750 --> 00:01:51,109
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.

13
00:01:51,109 --> 00:01:53,670
esto para el Visual Studio Code

14
00:01:53,670 --> 00:01:56,030
y estas, que si os fijáis

15
00:01:56,030 --> 00:01:57,650
son las mismas, cambiando aquí

16
00:01:57,650 --> 00:01:59,670
son las mismas instrucciones

17
00:01:59,670 --> 00:02:00,390
prácticamente

18
00:02:00,390 --> 00:02:04,049
cambiando aquí code por codium

19
00:02:04,049 --> 00:02:06,269
y entonces nos instala

20
00:02:06,269 --> 00:02:07,430
bueno, esto es un menos menos

21
00:02:07,430 --> 00:02:08,530
aquí hay una errata

22
00:02:08,530 --> 00:02:11,409
eso es menos menos

23
00:02:11,409 --> 00:02:12,689
bueno pues

24
00:02:12,689 --> 00:02:15,710
aquí con este código

25
00:02:15,710 --> 00:02:18,090
no instala en el Visual Studio Code o el codium

26
00:02:18,090 --> 00:02:19,370
hay una tercera forma

27
00:02:19,370 --> 00:02:21,330
de instalar el Visual Studio Codium

28
00:02:21,330 --> 00:02:25,449
nos permite instalarlo sin tener

29
00:02:25,449 --> 00:02:27,629
permisos de instalación, o sea, lo que tenemos

30
00:02:27,629 --> 00:02:29,009
que hacer, sin permisos de

31
00:02:29,009 --> 00:02:31,069
sin tener permisos de administrador

32
00:02:31,069 --> 00:02:33,789
lo que tenemos que hacer es coger

33
00:02:33,789 --> 00:02:35,569
irnos aquí a la página

34
00:02:35,569 --> 00:02:37,569
del Visual Studio Codium, le damos

35
00:02:37,569 --> 00:02:39,310
aquí a instalar, nos da aquí la opción

36
00:02:39,310 --> 00:02:41,289
de descargar y cuando

37
00:02:41,289 --> 00:02:43,509
vamos a la opción de descargar

38
00:02:43,509 --> 00:02:44,830
nos lleva a esta página

39
00:02:44,830 --> 00:02:47,689
nos lleva a esta página, voy a recargarla

40
00:02:47,689 --> 00:02:49,009
un momentito que la recargo

41
00:02:49,009 --> 00:02:51,430
esta página me salen aquí

42
00:02:51,430 --> 00:02:54,569
todas las arquitecturas, bueno, me salen casi todas las arquitecturas

43
00:02:54,569 --> 00:02:56,509
que soporta, esto hay un script

44
00:02:56,509 --> 00:02:58,509
que genera todas estas arquitecturas

45
00:02:58,509 --> 00:03:00,189
y me dice que tengo aquí

46
00:03:00,189 --> 00:03:01,169
130 más

47
00:03:01,169 --> 00:03:04,090
perdón, mostrar los 130

48
00:03:04,090 --> 00:03:06,349
bueno, aquí están las distintas arquitecturas

49
00:03:06,349 --> 00:03:08,409
yo tengo que buscar mi sistema operativo

50
00:03:08,409 --> 00:03:10,009
y mi

51
00:03:10,009 --> 00:03:12,270
y mi procesador adecuado

52
00:03:12,270 --> 00:03:14,110
bueno, pues veis que aquí hay para

53
00:03:14,110 --> 00:03:16,389
AMD 64, que son los Intel

54
00:03:16,389 --> 00:03:18,509
x86 64

55
00:03:18,509 --> 00:03:20,610
también son los procesadores de Intel

56
00:03:20,610 --> 00:03:23,430
AMD, ARM64

57
00:03:23,430 --> 00:03:25,090
este es el típico procesador

58
00:03:25,090 --> 00:03:25,930
que llevan los móviles

59
00:03:25,930 --> 00:03:27,490
ARM

60
00:03:27,490 --> 00:03:30,509
voy bajando, bueno

61
00:03:30,509 --> 00:03:33,090
Darwin son los Macintosh

62
00:03:33,090 --> 00:03:34,710
¿de acuerdo? Linux

63
00:03:34,710 --> 00:03:37,050
Linux para ARM, es decir, móviles

64
00:03:37,050 --> 00:03:39,090
Linux para

65
00:03:39,090 --> 00:03:41,090
RIS 564

66
00:03:42,030 --> 00:03:43,870
pues Linux para RIS 564

67
00:03:43,870 --> 00:03:44,969
y me interesa

68
00:03:44,969 --> 00:03:45,990
esta

69
00:03:45,990 --> 00:03:48,789
bueno, si estoy en Linux, bajarme la Linux

70
00:03:48,789 --> 00:03:50,770
x64, x64

71
00:03:50,770 --> 00:03:52,810
también son los procesadores de Intel, ya me dé

72
00:03:52,810 --> 00:03:54,930
y bueno

73
00:03:54,930 --> 00:03:56,530
y la versión, tengo que cogerme la

74
00:03:56,530 --> 00:03:58,069
en este caso la de Linux o la de Windows

75
00:03:58,069 --> 00:04:00,969
cojo y me la descargo, cuando me la descargo

76
00:04:00,969 --> 00:04:02,610
me sale

77
00:04:02,610 --> 00:04:04,930
bueno, un paquete

78
00:04:04,930 --> 00:04:06,870
que tengo que descomprimir y al descomprimirlo

79
00:04:06,870 --> 00:04:07,509
me sale esto

80
00:04:07,509 --> 00:04:09,969
esto si os fijáis pone Chrome

81
00:04:09,969 --> 00:04:11,449
claro, es que es el Google Chrome

82
00:04:11,449 --> 00:04:14,830
este programa

83
00:04:14,830 --> 00:04:16,490
está escrito en una cosa que se llama Electron

84
00:04:16,490 --> 00:04:18,529
que el Electron consiste en cogerse un Google Chrome

85
00:04:18,529 --> 00:04:20,050
y quitarle todas las decoraciones

86
00:04:20,050 --> 00:04:23,250
le quitamos la barra de navegación

87
00:04:23,250 --> 00:04:24,670
solamente le vamos a dejar

88
00:04:24,670 --> 00:04:26,110
la barra de menú para poner menús

89
00:04:26,110 --> 00:04:27,709
y luego ya nos sale la página web

90
00:04:27,709 --> 00:04:30,290
si lo arrancamos, este está

91
00:04:30,290 --> 00:04:32,990
inmaculado, cuando lo arranco por primera vez

92
00:04:32,990 --> 00:04:34,889
fijaos que facilón

93
00:04:34,889 --> 00:04:36,290
o sea, no tengo que hacer cosas raras

94
00:04:36,290 --> 00:04:38,350
simplemente cojo y me descargo el paquete

95
00:04:38,350 --> 00:04:39,490
y doy aquí en código

96
00:04:39,490 --> 00:04:41,790
y cuando le apetece, bueno lo he abierto dos veces

97
00:04:41,790 --> 00:04:44,329
cuando le apetece, se abre

98
00:04:44,329 --> 00:04:45,550
del Visual Studio Code

99
00:04:45,550 --> 00:04:47,930
a ver, va despacillo

100
00:04:47,930 --> 00:04:50,850
bueno, aquí lo tengo

101
00:04:50,850 --> 00:04:52,329
bueno, lo primero que voy a aprender

102
00:04:52,329 --> 00:04:55,230
lo primero que voy a aprender

103
00:04:55,230 --> 00:04:58,149
me vengo aquí

104
00:04:58,149 --> 00:05:00,129
estos son mis apuntes, bueno, el zoom

105
00:05:00,129 --> 00:05:02,810
puedo ampliar y reducir

106
00:05:02,810 --> 00:05:04,970
el tamaño de letra con control más o control menos

107
00:05:04,970 --> 00:05:05,910
si hago control más

108
00:05:05,910 --> 00:05:08,889
amplio el tamaño de letra y lo voy a dejar aquí

109
00:05:08,889 --> 00:05:10,529
bastante grande para que se vea bien en el vídeo

110
00:05:10,529 --> 00:05:12,389
o control menos lo reduzo

111
00:05:12,389 --> 00:05:14,269
eso yo con control más o control menos

112
00:05:14,269 --> 00:05:16,930
lo cambio, lo primero que me sale

113
00:05:16,930 --> 00:05:17,910
cuando lo

114
00:05:17,910 --> 00:05:19,310
instalo

115
00:05:19,310 --> 00:05:22,870
es que si quiero cambiar el color, si lo voy a poner

116
00:05:22,870 --> 00:05:25,069
en blanco, que de cada vídeo se me

117
00:05:25,069 --> 00:05:26,889
ve mejor, vosotros ponerlo en el color

118
00:05:26,889 --> 00:05:28,829
que queráis, lo que más os guste, de hecho

119
00:05:28,829 --> 00:05:30,649
hay un montón aquí de temas, si le dais aquí

120
00:05:30,649 --> 00:05:32,629
te sale un montón de temas que te pueden

121
00:05:32,629 --> 00:05:34,790
interesar, vale, aquí te pone

122
00:05:34,790 --> 00:05:36,910
también un montón de

123
00:05:36,910 --> 00:05:39,009
puntos que puedes ir haciendo

124
00:05:39,009 --> 00:05:40,269
para

125
00:05:40,269 --> 00:05:42,029
tunear

126
00:05:42,029 --> 00:05:44,189
tu editor

127
00:05:44,189 --> 00:05:46,430
¿de acuerdo? pues lo cogéis y lo tuneéis

128
00:05:46,430 --> 00:05:48,329
a vuestro gusto, yo con esto

129
00:05:48,329 --> 00:05:49,509
de momento me valgo

130
00:05:49,509 --> 00:05:51,610
vamos aquí a cerrar el webcom

131
00:05:51,610 --> 00:05:56,279
y vamos a ver, bueno, las características

132
00:05:56,279 --> 00:06:00,339
bueno, me salen aquí una serie de iconos

133
00:06:00,339 --> 00:06:01,379
¿de acuerdo?

134
00:06:01,879 --> 00:06:04,120
este es el explorador, si abro una carpeta

135
00:06:04,920 --> 00:06:06,120
si abro una carpeta

136
00:06:06,680 --> 00:06:08,399
busco aquí la carpeta

137
00:06:08,399 --> 00:06:09,399
venga, ábrete

138
00:06:09,399 --> 00:06:11,860
sesamo, voy a ver

139
00:06:11,860 --> 00:06:13,779
una carpeta que ya me he preparado aquí

140
00:06:13,779 --> 00:06:22,850
Si hago una carpeta, venga, ábrete, aquí, me salen los archivos de esa carpeta.

141
00:06:23,529 --> 00:06:27,029
Puedo hacer cosas con ellos, ¿de acuerdo?

142
00:06:28,089 --> 00:06:30,529
Vale, bueno, he intentado abrir un PDF, que no quiero abrir un PDF.

143
00:06:31,230 --> 00:06:34,069
Si pincho en ellos, pues vamos a ver que se abren, ¿de acuerdo?

144
00:06:34,129 --> 00:06:37,370
Ahí se me abren los archivos, ¿vale?

145
00:06:37,689 --> 00:06:40,410
¿De acuerdo?

146
00:06:42,050 --> 00:06:44,730
Vamos a ver características que tiene el editor.

147
00:06:44,730 --> 00:07:04,269
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.

148
00:07:04,629 --> 00:07:07,129
¿De acuerdo? Si le hago clic se pone y si hago clic se quita.

149
00:07:07,529 --> 00:07:09,029
Lo voy a dejar quitado para que sea más cómodo.

150
00:07:09,509 --> 00:07:13,329
Bueno, la vista múltiple, como veis, me está mostrando el mismo documento.

151
00:07:13,410 --> 00:07:18,290
Si yo vengo aquí y tecleo algo, vais a ver que sale en las dos partes, en los dos visores.

152
00:07:18,889 --> 00:07:24,129
¿Esto para qué es? Esto me sirve para ver el mismo documento.

153
00:07:24,149 --> 00:07:27,250
¿Lo veis? Puedo ver el mismo documento en dos partes distintas.

154
00:07:27,250 --> 00:07:32,110
O sea, yo podría tener aquí un documento grande, trabajar en dos partes a la vez, del mismo documento.

155
00:07:32,110 --> 00:07:43,329
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.

156
00:07:44,670 --> 00:07:45,430
Voy a dejar como estaba.

157
00:07:46,730 --> 00:07:54,329
Vale, la vista, la vista, aquí la he separado en vertical, pero también se puede separar en horizontal.

158
00:07:54,329 --> 00:08:01,069
Cuando pones aquí el ratón te dice pulsa alt para hacerlo en horizontal, pues pulso alt y hago clic.

159
00:08:01,069 --> 00:08:27,899
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í.

160
00:08:27,899 --> 00:08:38,929
Bueno, pues aquí tener documento, un documento, aquí tener otro, tener varios documentos abiertos y trabajar con ellos a la vez.

161
00:08:40,149 --> 00:08:47,149
¿Cómo lo voy a dividir? Pues, bueno, fijaros que cuando pincho aquí, puedo cambiarles, predimensionar y demás.

162
00:08:47,870 --> 00:08:51,289
Los voy a dividir según me vaya interesando. ¿Qué quiero cerrar una vista?

163
00:08:51,970 --> 00:08:56,409
Quiero cerrar estas dos vistas. Bueno, voy cerrando los archivos y la vista se cierra.

164
00:08:56,409 --> 00:09:00,350
Si cierro los archivos, la vista se cierra. Voy a dejar solamente una vista.

165
00:09:00,809 --> 00:09:02,149
Que me interesa ahora para trabajar.

166
00:09:02,690 --> 00:09:04,190
¿Qué más opciones interesantes tiene?

167
00:09:04,470 --> 00:09:05,610
Bueno, tiene la edición en bloque.

168
00:09:07,570 --> 00:09:08,350
Edición en bloque.

169
00:09:08,789 --> 00:09:12,470
Fijaros, vamos a pulsar mayúsculas al y las flechas de arriba y abajo.

170
00:09:12,649 --> 00:09:13,330
Esto es interesante.

171
00:09:14,610 --> 00:09:15,870
Por ejemplo, me vengo aquí.

172
00:09:18,039 --> 00:09:19,059
Voy a abrir varias líneas.

173
00:09:20,120 --> 00:09:21,860
Y puso mayúsculas al.

174
00:09:22,639 --> 00:09:23,820
Y muevo el cursor.

175
00:09:24,179 --> 00:09:25,059
¿Veis lo que está pasando?

176
00:09:27,909 --> 00:09:28,210
¿Veis?

177
00:09:28,889 --> 00:09:31,350
Puedo escribir lo mismo en varias líneas a la vez.

178
00:09:31,490 --> 00:09:32,870
O borrar varias líneas a la vez.

179
00:09:32,870 --> 00:09:55,110
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.

180
00:09:55,110 --> 00:10:11,200
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.

181
00:10:11,200 --> 00:10:14,120
añadir o quitar comentarios

182
00:10:14,120 --> 00:10:15,840
bueno, aquí he metido yo un comentario

183
00:10:15,840 --> 00:10:18,019
a mano, pero con control

184
00:10:18,019 --> 00:10:20,120
K, C se añaden comentarios

185
00:10:20,120 --> 00:10:22,340
y con control K, U

186
00:10:22,340 --> 00:10:23,679
se quitan comentarios

187
00:10:23,679 --> 00:10:25,759
voy a abrirme mejor

188
00:10:25,759 --> 00:10:27,940
un documento en Java, que ahí se ve muy bien

189
00:10:27,940 --> 00:10:30,200
en Java se ve muy bien

190
00:10:30,200 --> 00:10:31,480
tengo un documento en Java

191
00:10:31,480 --> 00:10:34,100
y quiero comentar estas dos líneas

192
00:10:34,100 --> 00:10:35,600
pues las marco

193
00:10:35,600 --> 00:10:37,840
las selecciono

194
00:10:37,840 --> 00:10:38,919
y te creo

195
00:10:38,919 --> 00:10:42,139
Control-K

196
00:10:42,139 --> 00:10:43,720
y en el momento que he pulsado Control-K

197
00:10:43,720 --> 00:10:45,519
aquí abajo, me dice

198
00:10:45,519 --> 00:10:47,879
Control-K ha sido presionado.

199
00:10:48,200 --> 00:10:48,639
Ahí se ha ido.

200
00:10:49,320 --> 00:10:51,860
Control-K ha sido presionado, esperando para la segunda tecla.

201
00:10:52,399 --> 00:10:53,100
Pues Control-K

202
00:10:53,100 --> 00:10:55,759
y ahora no me acuerdo la tecla, Control-K-U

203
00:10:55,759 --> 00:10:57,039
o Control-K-C.

204
00:10:57,159 --> 00:10:59,259
Control-K-C

205
00:10:59,259 --> 00:11:01,100
y ha añadido un comentario. ¿Lo veis?

206
00:11:01,100 --> 00:11:02,059
Que ha añadido el comentario.

207
00:11:02,980 --> 00:11:05,879
Y luego Control-K-U

208
00:11:05,879 --> 00:11:07,240
y quito el comentario.

209
00:11:07,240 --> 00:11:19,379
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.

210
00:11:21,379 --> 00:11:36,639
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.

211
00:11:36,639 --> 00:11:40,179
a ver, no me está funcionando

212
00:11:40,179 --> 00:11:40,940
el autocompletado

213
00:11:40,940 --> 00:11:43,279
el autocompletado

214
00:11:43,279 --> 00:11:47,759
ahí, mira, autocompletado, ¿veis?

215
00:11:47,980 --> 00:11:49,940
he puesto main, bueno, he puesto

216
00:11:49,940 --> 00:11:52,139
m, y me está autocompletando

217
00:11:52,139 --> 00:11:53,799
este main, esta función

218
00:11:53,799 --> 00:11:54,120
main

219
00:11:54,120 --> 00:11:57,580
si la guardo, pues

220
00:11:57,580 --> 00:11:59,700
me puedo autocompletar palabras que ya he escrito

221
00:11:59,700 --> 00:12:01,679
¿veis?

222
00:12:01,940 --> 00:12:03,960
me ha autocompletado ahí esa palabra

223
00:12:03,960 --> 00:12:05,820
que he escrito, palabras que ya he escrito

224
00:12:05,820 --> 00:12:07,860
las puede autocompletar, ¿vale?

225
00:12:07,860 --> 00:12:09,960
más cosas interesantes

226
00:12:09,960 --> 00:12:11,940
snippets

227
00:12:11,940 --> 00:12:14,139
o plantillas de código

228
00:12:14,139 --> 00:12:16,700
esto está muy interesante, es muy muy muy interesante

229
00:12:16,700 --> 00:12:20,440
para activarlo

230
00:12:20,440 --> 00:12:21,580
tenemos que ir a File

231
00:12:21,580 --> 00:12:23,379
Preference

232
00:12:23,379 --> 00:12:26,740
y veis que aquí pone Configurar Snippets

233
00:12:26,740 --> 00:12:28,059
Configurar Snippets

234
00:12:28,059 --> 00:12:29,259
Configurar plantillas

235
00:12:29,259 --> 00:12:32,179
doy aquí a la plantilla y me dice

236
00:12:32,179 --> 00:12:34,360
donde quiero meter yo la plantilla

237
00:12:34,360 --> 00:12:36,399
mira, la voy a meter en HTML

238
00:12:36,980 --> 00:12:41,559
Entonces busco aquí HTML, que estará por algún sitio.

239
00:12:41,779 --> 00:12:44,539
Mira, aquí HTML, hay que meter en HTML la plantilla.

240
00:12:44,779 --> 00:12:48,220
Y me pone esto, ¿de acuerdo?

241
00:12:48,860 --> 00:12:49,620
Me pone esto.

242
00:12:51,159 --> 00:12:52,840
¿Cómo funciona esto de las plantillas?

243
00:12:52,899 --> 00:12:53,379
Muy fácil.

244
00:12:54,500 --> 00:12:58,379
Mira, lo que voy a hacer es que voy a teclear unas palabras.

245
00:13:00,059 --> 00:13:01,200
En este caso está poniendo log.

246
00:13:01,360 --> 00:13:06,620
Y él automáticamente me va a añadir todo este código que he puesto aquí.

247
00:13:07,379 --> 00:13:09,000
¿Vale? Vamos a verlo en funcionamiento.

248
00:13:09,000 --> 00:13:10,879
Fijaos, me pone aquí un ejemplo

249
00:13:10,879 --> 00:13:12,820
Según entras ahí, te pone un ejemplo

250
00:13:12,820 --> 00:13:15,559
Lo vamos a copiar

251
00:13:15,559 --> 00:13:17,000
Esto hay que hacerlo así

252
00:13:17,000 --> 00:13:17,620
Se copia

253
00:13:17,620 --> 00:13:20,759
Se pega, esto está pensado

254
00:13:20,759 --> 00:13:21,960
Para hacerlo así

255
00:13:21,960 --> 00:13:24,620
Para quitar los comentarios

256
00:13:24,620 --> 00:13:26,299
Control K U

257
00:13:26,299 --> 00:13:27,679
Le quito el comentario

258
00:13:27,679 --> 00:13:30,559
Y ahora, bueno, voy a usar este comando

259
00:13:30,559 --> 00:13:31,919
Este ejemplo que me viene aquí

260
00:13:31,919 --> 00:13:35,240
Lo guardo, me voy a mi documento

261
00:13:35,240 --> 00:13:36,240
HTML

262
00:13:36,240 --> 00:13:37,399
Bueno, fijaros

263
00:13:37,399 --> 00:13:40,940
esta plantilla

264
00:13:40,940 --> 00:13:42,500
se llama print to consola

265
00:13:42,500 --> 00:13:44,320
imprimir a la consola

266
00:13:44,320 --> 00:13:46,860
y se dispara con log, tengo que escribir

267
00:13:46,860 --> 00:13:48,080
log para que se dispare

268
00:13:48,080 --> 00:13:49,919
entonces me voy aquí

269
00:13:49,919 --> 00:13:52,139
escribo log

270
00:13:52,139 --> 00:13:55,120
¿lo veis ahí?

271
00:13:56,460 --> 00:13:57,960
log, print to consola

272
00:13:57,960 --> 00:14:00,120
entonces pulso intro

273
00:14:00,120 --> 00:14:03,159
y ha puesto, fijaros que ha puesto

274
00:14:03,159 --> 00:14:04,460
exactamente

275
00:14:04,460 --> 00:14:06,480
si veis que pone console.log

276
00:14:06,480 --> 00:14:08,360
lo que sea, ha puesto exactamente

277
00:14:08,360 --> 00:14:10,559
este código de aquí

278
00:14:10,559 --> 00:14:13,600
si os fijáis, ha puesto este código de aquí

279
00:14:13,600 --> 00:14:15,539
ahora vamos a ver un poquito más en detalle

280
00:14:15,539 --> 00:14:17,759
pero ha puesto exactamente ese código

281
00:14:17,759 --> 00:14:19,759
de ahí, aquí veis que pone un $1

282
00:14:19,759 --> 00:14:21,799
y un $2, fijaos que ha puesto

283
00:14:21,799 --> 00:14:23,600
el cursor en la posición

284
00:14:23,600 --> 00:14:25,600
del $1, aquí puedo escribir

285
00:14:25,600 --> 00:14:27,159
y si pulso tabulador

286
00:14:27,159 --> 00:14:29,620
ah, se me ha desactivado

287
00:14:29,620 --> 00:14:31,120
la plantilla, espera, vuelvo a darle

288
00:14:31,120 --> 00:14:33,399
que después de un tiempo

289
00:14:33,399 --> 00:14:35,340
se desactiva, log

290
00:14:35,340 --> 00:14:37,840
aquí puedo escribir algo

291
00:14:37,840 --> 00:14:41,519
y si pulso tabulador, salto a la segunda posición.

292
00:14:42,460 --> 00:14:46,080
¿Veis? Tenía $1 y he saltado a $2.

293
00:14:46,399 --> 00:14:48,039
Esta plantilla viene de ejemplo.

294
00:14:48,480 --> 00:14:51,279
La voy a modificar, yo voy a hacer algo más útil.

295
00:14:51,799 --> 00:14:54,500
Esto viene de ejemplo, vamos a hacer algo más útil.

296
00:14:55,259 --> 00:14:58,059
Vamos a llamarla, yo qué sé, lista.

297
00:14:59,899 --> 00:15:01,120
Quiero introducir una lista.

298
00:15:01,539 --> 00:15:02,580
Y la voy a llamar ls.

299
00:15:02,679 --> 00:15:05,679
Esta plantilla se va a disparar cuando teclee ls.

300
00:15:05,679 --> 00:15:18,679
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.

301
00:15:18,679 --> 00:15:25,799
Que ponga, las listas se ponen en HTML con UL, las listas desordenadas.

302
00:15:25,919 --> 00:15:26,919
Vamos a poner que ponga esto.

303
00:15:28,700 --> 00:15:35,460
De acuerdo, pone aquí en la descripción, pone introducir lista.

304
00:15:37,059 --> 00:15:38,960
Introducir lista.

305
00:15:41,259 --> 00:15:45,480
Me voy a guardar, me voy aquí a la ULHTML, voy a borrar aquí un poco.

306
00:15:47,500 --> 00:15:51,360
Y cuando pongo ls, ¿veis que ahí? Ya ha puesto ls.

307
00:15:52,200 --> 00:15:53,000
Pulso intro.

308
00:15:53,159 --> 00:15:56,120
Y ha puesto simplemente la plantilla que yo le he dicho.

309
00:15:56,419 --> 00:15:58,159
Ha puesto ul, ul.

310
00:15:58,940 --> 00:15:59,559
¿Lo veis ahí?

311
00:16:00,299 --> 00:16:01,419
Ha puesto exactamente esto.

312
00:16:01,700 --> 00:16:02,639
Ul, ul.

313
00:16:03,100 --> 00:16:05,639
O sea, la plantilla, este es el nombre de la plantilla,

314
00:16:06,039 --> 00:16:08,139
se dispara con el prefijo, con esto,

315
00:16:08,440 --> 00:16:10,840
y aquí pongo lo que quiera que me ponga el editor.

316
00:16:11,000 --> 00:16:12,879
Bueno, y esto de introducir lista es la descripción

317
00:16:12,879 --> 00:16:15,700
que quiero que me salga cuando yo escriba aquí.

318
00:16:17,379 --> 00:16:18,039
¿Veis? Bueno.

319
00:16:18,039 --> 00:16:21,120
Aquí en un sitio

320
00:16:21,120 --> 00:16:21,980
Hay un sitio que me dice

321
00:16:21,980 --> 00:16:23,179
Ahí está

322
00:16:23,179 --> 00:16:23,740
¿Vale?

323
00:16:23,820 --> 00:16:25,480
Aquí me dice la descripción

324
00:16:25,480 --> 00:16:27,600
¿De acuerdo?

325
00:16:29,600 --> 00:16:30,320
Vamos allá

326
00:16:30,320 --> 00:16:33,860
Imaginaros que yo quiero que el cursor

327
00:16:33,860 --> 00:16:34,899
Me lo ponga aquí

328
00:16:34,899 --> 00:16:36,320
Nada más empezar

329
00:16:36,320 --> 00:16:37,100
Pues pongo

330
00:16:37,100 --> 00:16:39,240
$1, $2, $3

331
00:16:39,240 --> 00:16:41,159
En las posiciones en las que quiero

332
00:16:41,159 --> 00:16:42,080
Que me vaya pulsando

333
00:16:42,080 --> 00:16:44,080
Poniendo el cursor

334
00:16:44,080 --> 00:16:45,820
Si me voy aquí

335
00:16:45,820 --> 00:16:47,019
Y tecleo el S

336
00:16:47,019 --> 00:16:50,039
y pulso intro. Ahora el cursor me lo ha puesto

337
00:16:50,039 --> 00:16:51,799
ahí. ¿De acuerdo? Pues yo escribo

338
00:16:51,799 --> 00:16:54,000
pulso tabulador y ya

339
00:16:54,000 --> 00:16:54,600
me salta al final.

340
00:16:56,100 --> 00:16:58,679
¿Vale? Hay un

341
00:16:58,679 --> 00:17:00,100
dólar de estos que es especial.

342
00:17:00,259 --> 00:17:01,539
Mirad, fijaros, aquí tengo el dólar 1.

343
00:17:03,320 --> 00:17:03,879
Puedo poner

344
00:17:03,879 --> 00:17:06,119
un dólar 2, un dólar 3. Voy a poner varias líneas.

345
00:17:06,539 --> 00:17:07,740
Para poner varias líneas

346
00:17:07,740 --> 00:17:08,920
se hace con coma.

347
00:17:09,960 --> 00:17:10,900
No sé si pongo coma.

348
00:17:11,839 --> 00:17:13,460
Bueno, esto es como si fuese

349
00:17:13,460 --> 00:17:15,920
una matriz en Javascript. De hecho es una matriz

350
00:17:15,920 --> 00:17:16,799
en Javascript, pero bueno.

351
00:17:17,019 --> 00:17:22,539
una lista en Javascript, lo que hago es que pongo los valores entre comillas

352
00:17:22,539 --> 00:17:25,500
y luego coma para separar valores, ¿vale?

353
00:17:25,519 --> 00:17:35,089
Si yo lo pongo así y ejecuto la plantilla, veis que como lo ha puesto ahora, ¿no?

354
00:17:35,250 --> 00:17:37,170
Ha puesto las dos líneas.

355
00:17:37,390 --> 00:17:46,390
Bueno, voy a borrar todo esto, de hecho voy a borrar todo para que se vea mejor la plantilla, ¿vale?

356
00:17:46,390 --> 00:17:49,289
Veis que lo ha puesto, ya no lo ha puesto a continuación,

357
00:17:49,369 --> 00:17:52,170
lo ha puesto primero en una línea y luego en la otra línea.

358
00:17:52,170 --> 00:17:55,049
Imaginaros que yo quiero ahora

359
00:17:55,049 --> 00:17:57,309
Meter un elemento de la lista

360
00:17:57,309 --> 00:17:58,950
En HTML se meten con li

361
00:17:58,950 --> 00:18:01,910
Barra li

362
00:18:01,910 --> 00:18:03,549
¿De acuerdo?

363
00:18:03,930 --> 00:18:05,609
Y aquí pongo el elemento $1

364
00:18:05,609 --> 00:18:09,220
El segundo elemento de la lista

365
00:18:09,220 --> 00:18:16,680
Entonces $2

366
00:18:16,680 --> 00:18:18,220
Y voy a meter un tercero y un cuarto

367
00:18:18,220 --> 00:18:21,509
$3

368
00:18:21,509 --> 00:18:25,500
Y $4

369
00:18:25,500 --> 00:18:28,240
He puesto cuatro elementos en la lista

370
00:18:28,240 --> 00:18:30,240
Bueno, pues si ahora vengo aquí

371
00:18:30,240 --> 00:18:32,819
Y tecleo ls

372
00:18:32,819 --> 00:18:33,740
Y le doy

373
00:18:33,740 --> 00:18:51,289
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.

374
00:18:51,289 --> 00:19:04,410
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í.

375
00:19:04,750 --> 00:19:12,230
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í.

376
00:19:12,230 --> 00:19:35,809
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?

377
00:19:35,809 --> 00:19:58,450
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í.

378
00:19:59,349 --> 00:20:04,829
¿Qué pasa si repito un dólar uno, un dólar dos, un dólar lo que sea, en dos sitios?

379
00:20:04,910 --> 00:20:06,609
Voy a poner aquí el dólar uno y aquí el dólar dos.

380
00:20:07,730 --> 00:20:08,069
¿De acuerdo?

381
00:20:08,630 --> 00:20:10,329
Lo repito, por la razón que sea.

382
00:20:10,950 --> 00:20:14,150
Bueno, pues si lo repito, pasa lo siguiente.

383
00:20:18,329 --> 00:20:19,390
Aquí estoy el dólar uno, ¿no?

384
00:20:19,390 --> 00:20:22,309
Pues cuando escribo, ¿veis que lo repite en los dos sitios?

385
00:20:22,970 --> 00:20:26,329
O sea, en el dólar uno lo había puesto aquí y lo había puesto aquí.

386
00:20:26,410 --> 00:20:27,430
Pues me lo pone en los dos sitios.

387
00:20:28,049 --> 00:20:28,950
Siguiente, el dólar dos.

388
00:20:29,009 --> 00:20:30,950
El dólar dos he puesto que lo ponga aquí y lo ponga aquí.

389
00:20:30,950 --> 00:20:34,109
De hecho, me está diciendo ya los cursores, si os fijáis, que ya están las dos posiciones.

390
00:20:34,750 --> 00:20:35,390
Pues me los copia.

391
00:20:36,190 --> 00:20:38,569
Hago el dólar 3 y hago el dólar 4.

392
00:20:39,990 --> 00:20:40,589
¿De acuerdo?

393
00:20:42,890 --> 00:20:44,289
¿Qué más cosas puedo hacer?

394
00:20:44,509 --> 00:20:46,230
Puedo poner valores por defecto.

395
00:20:46,710 --> 00:20:48,450
Se pueden poner valores por defecto.

396
00:20:50,049 --> 00:20:51,630
Bueno, voy a quitar los valores repetidos.

397
00:20:54,279 --> 00:20:56,339
Los valores por defecto se ponen haciendo lo siguiente.

398
00:20:57,019 --> 00:21:00,779
O sea, ponen dos llaves, dos puntos y el valor por defecto.

399
00:21:00,779 --> 00:21:02,859
Aquí voy a poner

400
00:21:02,859 --> 00:21:04,539
Número 1

401
00:21:04,539 --> 00:21:09,890
Aquí voy a poner otro valor por defecto

402
00:21:09,890 --> 00:21:10,329
Que sea

403
00:21:10,329 --> 00:21:11,990
Segundo

404
00:21:11,990 --> 00:21:16,009
Ahí lo tengo

405
00:21:16,009 --> 00:21:18,009
Segundo

406
00:21:18,009 --> 00:21:20,009
Y lo guardo

407
00:21:20,009 --> 00:21:24,400
Bueno, pues ahora cuando lo ejecuto

408
00:21:24,400 --> 00:21:28,710
Mi plantilla

409
00:21:28,710 --> 00:21:31,599
¿De acuerdo?

410
00:21:32,339 --> 00:21:34,119
Fijaos, me ha puesto los valores por defecto ya

411
00:21:34,119 --> 00:21:34,940
Directamente

412
00:21:34,940 --> 00:21:36,359
Y me lo marca entero

413
00:21:36,359 --> 00:21:38,119
Me lo marca entero

414
00:21:38,119 --> 00:21:39,539
Si yo quisiera dejar ese valor

415
00:21:39,539 --> 00:21:40,579
Pusaría tabulador

416
00:21:40,579 --> 00:21:41,900
Y me salta ya el siguiente valor

417
00:21:41,900 --> 00:21:44,319
pero me lo marca entero para que yo escriba lo que quiera

418
00:21:44,319 --> 00:21:46,420
¿vale? el tercero

419
00:21:46,420 --> 00:21:48,039
y el cuarto, el final

420
00:21:48,039 --> 00:21:49,000
lo repito

421
00:21:49,000 --> 00:21:52,559
si así lo hago, pulso tabulador

422
00:21:52,559 --> 00:21:54,759
tengo el valor por defecto

423
00:21:54,759 --> 00:21:56,319
si escribo algo

424
00:21:56,319 --> 00:21:57,140
lo puedo cambiar

425
00:21:57,140 --> 00:22:00,420
¿de acuerdo? si pulso tabulador salto al siguiente

426
00:22:00,420 --> 00:22:01,859
que no lo voy a cambiar, tabulador

427
00:22:01,859 --> 00:22:04,359
y salto al siguiente, etc, etc, etc

428
00:22:04,359 --> 00:22:07,619
más cosillas

429
00:22:07,619 --> 00:22:08,900
más cosillas

430
00:22:08,900 --> 00:22:11,619
imaginaros que quiero meter otra

431
00:22:11,619 --> 00:22:13,220
otro elemento

432
00:22:13,220 --> 00:22:16,240
quiero meter, pues aquí he metido

433
00:22:16,240 --> 00:22:18,099
aquí el ls, pero quiero meter otro, imaginaos

434
00:22:18,099 --> 00:22:20,220
que tengo un css que uso mucho

435
00:22:20,220 --> 00:22:21,259
por ejemplo

436
00:22:21,259 --> 00:22:24,519
por ejemplo, este es el

437
00:22:24,519 --> 00:22:26,259
el enlace

438
00:22:26,259 --> 00:22:27,880
de la hoja de estilos del

439
00:22:27,880 --> 00:22:30,140
w3school y esta, pues si usáis

440
00:22:30,140 --> 00:22:32,019
el w3school, la hoja

441
00:22:32,019 --> 00:22:34,200
de estilos, puede ser

442
00:22:34,200 --> 00:22:36,059
que se use mucho, bueno, pues lo que tengo

443
00:22:36,059 --> 00:22:38,160
que hacer es

444
00:22:38,160 --> 00:22:39,900
pongo una coma y ahora

445
00:22:39,900 --> 00:22:42,140
me copio y pego el código

446
00:22:42,140 --> 00:22:45,660
que ponen de ejemplo, este código

447
00:22:45,660 --> 00:22:47,519
me lo compro y me lo pego

448
00:22:47,519 --> 00:22:51,720
bueno, según se va aprendiendo

449
00:22:51,720 --> 00:22:53,660
hay que aprender

450
00:22:53,660 --> 00:22:55,380
haciendo, es buena idea cogerse

451
00:22:55,380 --> 00:22:57,180
el editor e ir probando todas

452
00:22:57,180 --> 00:22:59,160
estas cosas que he visto

453
00:22:59,160 --> 00:23:01,359
hay que hacer una chuleta, ponerse a la vista

454
00:23:01,359 --> 00:23:02,720
en algún sitio, pues yo que sé

455
00:23:02,720 --> 00:23:04,759
en una vista separada

456
00:23:04,759 --> 00:23:06,599
y voy viendo mi chuleta

457
00:23:06,599 --> 00:23:09,480
¿de acuerdo? bueno, pues aquí lo tengo

458
00:23:09,480 --> 00:23:11,740
comentado, es código comentado, podéis comentar

459
00:23:11,740 --> 00:23:13,359
en Javascript se comenta con

460
00:23:13,359 --> 00:23:15,400
barra, barra, en JSON se comenta con barra, barra

461
00:23:15,400 --> 00:23:17,160
y aquí hemos dicho que para

462
00:23:17,160 --> 00:23:19,380
quitar el código comentado

463
00:23:19,380 --> 00:23:21,319
hemos visto aquí

464
00:23:21,319 --> 00:23:23,380
que para quitar el código

465
00:23:23,380 --> 00:23:25,000
comentado es control K

466
00:23:25,000 --> 00:23:26,839
u, voy a hacer un control K u

467
00:23:26,839 --> 00:23:29,180
control K u

468
00:23:29,180 --> 00:23:31,180
le quito el código comentado, mira

469
00:23:31,180 --> 00:23:36,329
esto lo voy a llamar

470
00:23:36,329 --> 00:23:38,529
w3.css

471
00:23:39,309 --> 00:23:40,789
que es como se llama esta hoja de estilos

472
00:23:40,789 --> 00:23:42,670
el disparador

473
00:23:42,670 --> 00:23:44,250
puedo poner aquí la palabra que quiera

474
00:23:44,250 --> 00:23:46,349
voy a poner w3.css

475
00:23:46,349 --> 00:23:47,670
Ese va a ser el disparador.

476
00:23:48,549 --> 00:23:50,630
Voy a poner aquí el código del disparador.

477
00:23:51,490 --> 00:23:55,730
Digo, perdón, el código que se va a poner en el disparador y va a pasar algo especial.

478
00:23:58,210 --> 00:24:00,650
Cuando lo ponga, va a pasar algo especial.

479
00:24:06,009 --> 00:24:09,289
Lo pongo y fijaros que aquí ya ha empezado a haber errores.

480
00:24:09,569 --> 00:24:10,549
¿Qué está pasando?

481
00:24:10,990 --> 00:24:16,569
Bueno, pues que este código, yo tengo que meter entre comillas el código que tiene que aparecer.

482
00:24:16,569 --> 00:24:19,210
Pero este código ya tiene comillas de por sí.

483
00:24:19,809 --> 00:24:20,849
Ahí veis las comillas, ¿no?

484
00:24:21,170 --> 00:24:21,910
Ya tiene comillas.

485
00:24:21,910 --> 00:24:24,150
¿Cómo meto comillas cuando ya tengo comillas?

486
00:24:24,250 --> 00:24:26,109
Bueno, pues hay que hacer un escape

487
00:24:26,109 --> 00:24:27,950
Que es barra invertida

488
00:24:27,950 --> 00:24:30,150
¿Lo veis ahí? Es la barra de Windows

489
00:24:30,150 --> 00:24:32,309
La barra que se usa en Windows, barra invertida

490
00:24:32,309 --> 00:24:34,269
Cada comilla que vea, le tengo que poner

491
00:24:34,269 --> 00:24:36,190
Una barra invertida, barra invertida

492
00:24:36,190 --> 00:24:38,670
Barra invertida

493
00:24:38,670 --> 00:24:40,269
Bueno, ahí está

494
00:24:40,269 --> 00:24:41,990
La comilla final, y ya está

495
00:24:41,990 --> 00:24:44,309
O sea, siempre que tenga un código, moraleja de esta historia

496
00:24:44,309 --> 00:24:45,930
Siempre que tenga un código

497
00:24:45,930 --> 00:24:48,210
Una plantilla que tenga comillas, pues tengo que poner

498
00:24:48,210 --> 00:24:49,769
Barra invertida, comillas

499
00:24:49,769 --> 00:25:00,730
Si la apruebo, bueno, guardo, la apruebo, pongo W3CSS, ya la tengo, ya se me dispara, ya me la pone.

500
00:25:02,690 --> 00:25:06,259
Con esto se acaba la plantilla del código.

501
00:25:06,579 --> 00:25:07,220
Más cositas.

502
00:25:08,480 --> 00:25:09,000
Los plugins.

503
00:25:10,519 --> 00:25:19,099
Bueno, los plugins, ahora los editores modernos, casi todos o prácticamente todos tienen plugins.

504
00:25:19,099 --> 00:25:24,039
O sea, puedo ponerle extensiones que mejoran el funcionamiento del editor.

505
00:25:24,599 --> 00:25:27,539
Antiguamente esto no pasaba, o sea, antiguamente era editor y punto.

506
00:25:27,980 --> 00:25:30,539
O sea, tú te coges el blog de notas, el blog de notas es un editor de texto,

507
00:25:30,660 --> 00:25:34,460
tú puedes programar en el blog de notas, es una tortura, pero se puede.

508
00:25:35,059 --> 00:25:36,299
Y no tiene extensiones.

509
00:25:36,400 --> 00:25:40,380
Bueno, pues actualmente prácticamente todos los editores de texto tienen extensiones,

510
00:25:40,420 --> 00:25:41,680
y algunas muy, muy buenas.

511
00:25:41,839 --> 00:25:43,220
Bueno, las extensiones.

512
00:25:43,339 --> 00:25:46,500
Bueno, voy a hacer un repaso de estas cositas de aquí,

513
00:25:47,000 --> 00:25:48,119
antes de continuar con las extensiones.

514
00:25:48,119 --> 00:26:07,579
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?

515
00:26:07,579 --> 00:26:09,480
esto para errores

516
00:26:09,480 --> 00:26:11,240
para control de errores, esto

517
00:26:11,240 --> 00:26:13,619
el html no es un ejecutable, pero si

518
00:26:13,619 --> 00:26:16,039
programo en java, o programo en javascript

519
00:26:16,039 --> 00:26:17,880
puedo ejecutar, veis aquí

520
00:26:17,880 --> 00:26:19,839
hay un menú RAM, de acuerdo

521
00:26:19,839 --> 00:26:21,740
y puedo hacer lo que se llama

522
00:26:21,740 --> 00:26:23,660
un debug, puedo ejecutar paso a paso para

523
00:26:23,660 --> 00:26:24,460
encontrar errores

524
00:26:24,460 --> 00:26:27,640
bueno, y aquí tengo los plugins, vamos a ver los plugins

525
00:26:27,640 --> 00:26:29,920
bueno, aquí están los plugins

526
00:26:29,920 --> 00:26:31,799
los he estado obteniendo ahora, el internet va

527
00:26:31,799 --> 00:26:33,160
uy, la conexión que tengo

528
00:26:33,160 --> 00:26:35,740
la conexión que tengo es un poco lenta

529
00:26:35,740 --> 00:26:36,940
uy

530
00:26:36,940 --> 00:27:00,460
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.

531
00:27:00,460 --> 00:27:02,900
Bueno, pues hay aquí un número contable

532
00:27:02,900 --> 00:27:04,519
Aquí el RHAT, este está muy bien

533
00:27:04,519 --> 00:27:06,140
¿De acuerdo? Si pincháis en uno

534
00:27:06,140 --> 00:27:07,559
Te pone la descripción

535
00:27:07,559 --> 00:27:09,859
No voy a instalar este

536
00:27:09,859 --> 00:27:10,859
Porque es muy grande

537
00:27:10,859 --> 00:27:14,480
Y no me vale

538
00:27:14,480 --> 00:27:16,519
Para lo que quiero en este manual

539
00:27:16,519 --> 00:27:17,740
Voy a instalar este otro

540
00:27:17,740 --> 00:27:20,339
El Web Visual Editor

541
00:27:20,339 --> 00:27:23,309
Este es un editor

542
00:27:23,309 --> 00:27:25,710
Un plugin, lo pongo aquí

543
00:27:25,710 --> 00:27:28,029
Lo busco, hay cientos de plugins

544
00:27:28,029 --> 00:27:29,109
Mira, este

545
00:27:29,109 --> 00:27:33,019
Web Visual Editor, lo instalo

546
00:27:33,140 --> 00:27:54,750
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.

547
00:27:54,750 --> 00:28:14,950
¿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.

548
00:28:14,950 --> 00:28:18,869
O sea, aquí hay una pestañita que le das y te muestra los atajos del teclado.

549
00:28:19,150 --> 00:28:20,829
Que hay algunas extensiones, por ejemplo, la de Java.

550
00:28:20,990 --> 00:28:22,450
Si la instaláis vais a ver que le dais ahí.

551
00:28:22,950 --> 00:28:25,829
Y tiene, pues, que si pulsa hasta el tecla lo ejecuto.

552
00:28:26,589 --> 00:28:26,930
¿De acuerdo?

553
00:28:27,049 --> 00:28:28,829
Y te digo los errores, que eso me va a interesar.

554
00:28:29,190 --> 00:28:31,289
Bueno, pues he instalado este, el Visual Editor.

555
00:28:32,730 --> 00:28:33,769
Voy a irse aquí para cerrar.

556
00:28:33,890 --> 00:28:34,670
Me voy a mi página.

557
00:28:36,609 --> 00:28:36,990
¿De acuerdo?

558
00:28:37,410 --> 00:28:38,990
Y veis que aquí ha salido esto.

559
00:28:39,690 --> 00:28:40,990
Estos iconos antes no existían.

560
00:28:42,130 --> 00:28:43,809
Puedo abrir lo que se llama el Visual Editor.

561
00:28:43,809 --> 00:28:44,829
en un lado

562
00:28:44,829 --> 00:28:47,670
o en página completa. Le voy a decir aquí que me lo abre

563
00:28:47,670 --> 00:28:49,390
en un lado, ¿vale? El Visual Editor.

564
00:28:50,690 --> 00:28:51,809
Eh, tal...

565
00:28:52,529 --> 00:28:53,789
Bueno, vamos a abrir, poner

566
00:28:53,789 --> 00:28:55,569
bien el documento. Mira, voy a hacer

567
00:28:55,569 --> 00:28:57,589
un HTML. Eh, otra cosa.

568
00:28:59,390 --> 00:28:59,789
Los

569
00:28:59,789 --> 00:29:01,829
Snippets, las plantillas de código,

570
00:29:02,589 --> 00:29:03,910
ya tiene preparadas

571
00:29:03,910 --> 00:29:05,809
unas cuantas en Visual Studio.

572
00:29:05,930 --> 00:29:07,730
Tiene muchas, de hecho. En HTML, vamos, es

573
00:29:07,730 --> 00:29:09,650
el rey. ¿Veis que aquí tiene aquí

574
00:29:09,650 --> 00:29:11,769
esta de HTML, escrito HTML?

575
00:29:11,769 --> 00:29:14,410
y me dice, mira, puedes ponerlo de HTML

576
00:29:14,410 --> 00:29:16,390
HTML o este que pone HTML5.

577
00:29:16,490 --> 00:29:18,130
Mira, pues este que pone HTML5

578
00:29:18,130 --> 00:29:19,410
me abre,

579
00:29:22,390 --> 00:29:23,069
bueno, me abre.

580
00:29:24,250 --> 00:29:26,069
Bueno, es una plantilla, me está en la posición

581
00:29:26,069 --> 00:29:28,690
$1, la $2, aquí está la $3

582
00:29:28,690 --> 00:29:30,509
y aquí está al final. Bueno, lo que ha hecho

583
00:29:30,509 --> 00:29:31,849
es que me ha escrito ya una página web.

584
00:29:32,269 --> 00:29:34,509
¿De acuerdo? Aquí tal...

585
00:29:38,339 --> 00:29:39,420
No sé por qué me está dando errores

586
00:29:39,420 --> 00:29:41,740
ahora. Vaya, me ha fallado completamente.

587
00:29:42,279 --> 00:29:43,480
Lo que tiene los...

588
00:29:44,059 --> 00:29:45,059
el experimento. Bueno,

589
00:29:45,059 --> 00:29:47,579
aquí me ha fallado

590
00:29:47,579 --> 00:29:49,539
completamente, aquí me tendría que estar

591
00:29:49,539 --> 00:29:50,779
saliendo lo que escribí de aquí

592
00:29:50,779 --> 00:29:54,269
lo guardo

593
00:29:54,269 --> 00:29:56,529
le doy, re-event

594
00:29:56,529 --> 00:29:59,309
ok, bueno pues

595
00:29:59,309 --> 00:30:01,390
me ha fallado más que una escopeta de feria

596
00:30:01,390 --> 00:30:02,450
el

597
00:30:02,450 --> 00:30:04,930
el plugin, bueno

598
00:30:04,930 --> 00:30:07,230
este cuando funciona

599
00:30:07,230 --> 00:30:09,289
te muestra aquí lo que vas escribiendo

600
00:30:09,289 --> 00:30:11,269
o sea, te muestra aquí ya la página web

601
00:30:11,269 --> 00:30:13,269
y no tienes que recargarla constantemente

602
00:30:13,269 --> 00:30:15,529
vamos a

603
00:30:15,529 --> 00:30:16,690
listar, mira, me ha fallado el plugin

604
00:30:16,690 --> 00:30:19,890
vamos a desinstalarlo, me ha fallado

605
00:30:19,890 --> 00:30:22,049
esto no estaba previsto, yo estaba previsto que funcionara

606
00:30:22,049 --> 00:30:24,369
no ha funcionado, bueno, pues lo voy a desinstalar

607
00:30:24,369 --> 00:30:25,410
bueno, me voy aquí

608
00:30:25,410 --> 00:30:28,269
doy la ruedecita y le doy aquí a desinstalar

609
00:30:28,269 --> 00:30:29,950
y desinstalo el plugin

610
00:30:29,950 --> 00:30:31,650
¿de acuerdo?

611
00:30:31,730 --> 00:30:34,250
me dice que tengo que reiniciar las extensiones

612
00:30:34,250 --> 00:30:35,269
le doy

613
00:30:35,269 --> 00:30:39,369
se reinician y ya está

614
00:30:39,369 --> 00:30:41,289
bueno, esto se ha quedado aquí y fijaos que

615
00:30:41,289 --> 00:30:42,609
ya me ha quitado

616
00:30:42,609 --> 00:30:44,950
ya me ha quitado, ¿veis?

617
00:30:45,369 --> 00:30:46,529
los iconos del visual

618
00:30:46,529 --> 00:30:48,150
del Visual Editor

619
00:30:48,150 --> 00:30:52,450
tiene muchas más características

620
00:30:52,450 --> 00:30:54,289
pero bueno, ya llevamos bastante

621
00:30:54,289 --> 00:30:56,569
para lo que es el editor

622
00:30:56,569 --> 00:30:58,049
cuando trabajéis

623
00:30:58,049 --> 00:30:59,130
os recomiendo

624
00:30:59,130 --> 00:31:02,130
que probéis

625
00:31:02,130 --> 00:31:04,089
lo que hemos visto

626
00:31:04,089 --> 00:31:05,390
que probéis los atajos del teclado

627
00:31:05,390 --> 00:31:07,829
me ha quedado un atajo del teclado sin contar

628
00:31:07,829 --> 00:31:10,029
me ha quedado un atajo del teclado sin contar

629
00:31:10,029 --> 00:31:12,950
la edición

630
00:31:12,950 --> 00:31:13,849
vista múltiple

631
00:31:13,849 --> 00:31:16,029
no lo he puesto

632
00:31:16,029 --> 00:31:42,569
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.

633
00:31:42,569 --> 00:31:45,569
Luego también suelen tener código...

634
00:31:46,450 --> 00:31:50,029
Me ha hecho... Espera, que lo estoy pegando sin querer.

635
00:31:51,170 --> 00:31:53,289
Cuando pulsáis el botón derecho del ratón...

636
00:31:53,289 --> 00:31:54,049
¡Ah, qué pesado!

637
00:31:54,950 --> 00:31:56,349
Quiero el botón derecho. Bueno, no me hace caso.

638
00:31:57,690 --> 00:31:58,750
Quiero el botón derecho.

639
00:31:58,890 --> 00:32:00,349
Bueno, cuando pulsáis el botón derecho del ratón...

640
00:32:00,349 --> 00:32:03,690
Pero bueno, me está fallando todo.

641
00:32:04,130 --> 00:32:08,670
Bueno, cuando pincháis el botón derecho del ratón, tiene algunas acciones.

642
00:32:09,609 --> 00:32:10,250
Me está fallando.

643
00:32:10,250 --> 00:32:12,549
O es ponerme a grabar y falla todo.

644
00:32:14,670 --> 00:32:17,789
Cuando pulsáis el botón derecho del ratón, salen cosas interesantes.

645
00:32:17,910 --> 00:32:19,509
Por ejemplo, aquí podéis hacer una selección.

646
00:32:20,150 --> 00:32:21,150
Ah, mira, lo voy a hacer con los menús.

647
00:32:23,690 --> 00:32:26,130
Y puedo, pues, duplicar una línea, moverla arriba, ¿ves?

648
00:32:26,569 --> 00:32:28,430
Hay opciones que son interesantes.

649
00:32:28,509 --> 00:32:39,009
Por ejemplo, al A arriba mueve una línea, al A abajo baja una línea, puedo duplicar una línea, ¿de acuerdo?

650
00:32:39,130 --> 00:32:40,509
Puedo copiar una línea.

651
00:32:40,509 --> 00:32:42,630
hay aquí opciones que son interesantes

652
00:32:42,630 --> 00:32:43,569
usar

653
00:32:43,569 --> 00:32:46,789
bueno, ahora sí

654
00:32:46,789 --> 00:32:49,210
ahora sí que ya llegó el final del vídeo

655
00:32:49,210 --> 00:32:51,170
espero

656
00:32:51,170 --> 00:32:52,569
que le sacáis rendimiento

657
00:32:52,569 --> 00:32:54,829
probadlo, o sea, esto solamente lo

658
00:32:54,829 --> 00:32:56,769
lo vais a

659
00:32:56,769 --> 00:32:58,849
aprender si lo usáis, entonces pues

660
00:32:58,849 --> 00:33:01,009
probad a hacer una vista

661
00:33:01,009 --> 00:33:02,650
múltiple, a una edición en bloque

662
00:33:02,650 --> 00:33:05,329
a añadir y quitar comentarios

663
00:33:05,329 --> 00:33:07,170
a hacer autocompletado, a hacer un snippet

664
00:33:07,170 --> 00:33:09,170
y eso usarlo en vuestro día a día

665
00:33:09,170 --> 00:33:11,369
a instalar plugins, bueno plugins seguramente que ya habéis

666
00:33:11,369 --> 00:33:13,369
instalado, porque prácticamente

667
00:33:13,369 --> 00:33:15,470
todos los profesores os obligamos a instalar plugins

668
00:33:15,470 --> 00:33:17,509
y usalo

669
00:33:17,509 --> 00:33:18,549
en vuestro día a día