1
00:00:00,000 --> 00:00:07,440

2
00:00:07,440 --> 00:00:08,180
>> TOMAS REIMERS: Hola a todos.

3
00:00:08,180 --> 00:00:09,250
Tomas Reimers de mi nombre.

4
00:00:09,250 --> 00:00:10,500
>> MIKE RIZZO: Y yo soy Mike Rizzo.

5
00:00:10,500 --> 00:00:12,990
>> TOMAS REIMERS: Somos dos de TS CS50s.

6
00:00:12,990 --> 00:00:18,910
Y hoy estamos liderando el seminario sobre
JavaScript y CSS para aplicaciones web.

7
00:00:18,910 --> 00:00:22,140
Si quieres seguir adelante, la
enlace está justo ahí.

8
00:00:22,140 --> 00:00:25,190
¿Y usted quiere poner para arriba
brevemente en la computadora?

9
00:00:25,190 --> 00:00:27,460
>> Ahí está el enlace.

10
00:00:27,460 --> 00:00:30,390
Es un sitio pequeño, que tiene vínculos con
todos los recursos que van a ser

11
00:00:30,390 --> 00:00:36,490
que lo llevan hoy y también tiene una gran cantidad de
información útil escrito por nosotros para

12
00:00:36,490 --> 00:00:39,680
leer más en profundidad cuando regrese,
y que está tratando de recordar lo que

13
00:00:39,680 --> 00:00:42,166
fue exactamente lo que decimos, lo que eras
hablando, et cetera.

14
00:00:42,166 --> 00:00:43,870
>> MIKE RIZZO: Muy bien.

15
00:00:43,870 --> 00:00:44,890
Así que vamos a empezar.

16
00:00:44,890 --> 00:00:45,700
>> TOMAS REIMERS: ¿Así que quieres comenzar?

17
00:00:45,700 --> 00:00:45,970
Aceptar.

18
00:00:45,970 --> 00:00:47,170
>> MIKE RIZZO: Si.

19
00:00:47,170 --> 00:00:51,730
Así que primero queríamos empezar con una amplia
visión general acerca de la Internet y

20
00:00:51,730 --> 00:00:54,240
los tipos de archivos en el diseño de sitios web.

21
00:00:54,240 --> 00:00:57,550
Si bien esta presentación quiero
entrar en JavaScript mucho más

22
00:00:57,550 --> 00:01:00,320
más tarde, queríamos empezar con
simplemente, un poco, como a vista de pájaro

23
00:01:00,320 --> 00:01:03,270
de lo que un sitio web es y cómo
a pensar en el diseño de un

24
00:01:03,270 --> 00:01:04,800
sitio web para el inicio.

25
00:01:04,800 --> 00:01:08,370
>> Así que ustedes, en este momento - con lo
siendo viernes por la noche - debe tener

26
00:01:08,370 --> 00:01:11,000
presentado sus finanzas CS50
boletines de problemas.

27
00:01:11,000 --> 00:01:15,260
Con suerte, eso fue un buen sabor
de lo que la programación web puede ser.

28
00:01:15,260 --> 00:01:18,261
Pero aquí queremos, algo así, dar
que otro gusto, también.

29
00:01:18,261 --> 00:01:23,190
>> TOMAS REIMERS: Así que para recapitular lo
sucede, cuando se escribe en su URL a

30
00:01:23,190 --> 00:01:26,650
su navegador de Internet, que pone URL
miró en el ordenador.

31
00:01:26,650 --> 00:01:28,590
Y conecta su ordenador de
a otro equipo,

32
00:01:28,590 --> 00:01:29,890
que alberga ese sitio web.

33
00:01:29,890 --> 00:01:33,150
OK, así que cuando vas a google.com, eres
conectado a uno de Google de

34
00:01:33,150 --> 00:01:36,496
ordenadores, que tiene el
archivos de google.com.

35
00:01:36,496 --> 00:01:38,750
>> Después se le pedirá un archivo específico.

36
00:01:38,750 --> 00:01:40,020
Así que si vas a -

37
00:01:40,020 --> 00:01:41,550
No sé -

38
00:01:41,550 --> 00:01:48,170
example.com / index.html o / test.html,
usted va a pedir

39
00:01:48,170 --> 00:01:49,340
ese archivo específico.

40
00:01:49,340 --> 00:01:52,780
Y el servidor web va
para volver a usted.

41
00:01:52,780 --> 00:01:54,910
>> Luego, una vez que pasan por ese archivo -

42
00:01:54,910 --> 00:01:57,750

43
00:01:57,750 --> 00:01:59,950
una vez que estás equipo obtiene que
archivo - que va a comenzar

44
00:01:59,950 --> 00:02:00,820
para construir una página web.

45
00:02:00,820 --> 00:02:03,020
Así que ahora que tiene el archivo HTML,
que es algo así como el

46
00:02:03,020 --> 00:02:05,170
estructura de la página web.

47
00:02:05,170 --> 00:02:08,620
El archivo HTML también podría hacer referencia a
Archivos CSS, que definen el

48
00:02:08,620 --> 00:02:09,889
estilo de la página web.

49
00:02:09,889 --> 00:02:12,970
>> Archivos JavaScript, que define
interacción con la página web.

50
00:02:12,970 --> 00:02:15,200
Los archivos de imagen, que son sólo imágenes.

51
00:02:15,200 --> 00:02:19,450
Y, posiblemente, establecer vínculos con otros archivos HTML,
que luego se puede visitar.

52
00:02:19,450 --> 00:02:22,656

53
00:02:22,656 --> 00:02:24,380
>> MIKE RIZZO: OK, muy bien.

54
00:02:24,380 --> 00:02:28,980
Así que ustedes tienen de todo, tal vez,
laboriosamente configurar su host local

55
00:02:28,980 --> 00:02:30,810
en su máquina virtual.

56
00:02:30,810 --> 00:02:35,650
Y eso, un poco, es lo local
dominio que el equipo recibe sólo

57
00:02:35,650 --> 00:02:38,760
para usted en su propia dirección IP.

58
00:02:38,760 --> 00:02:43,300
>> Así que dentro de eso, entonces usted puede agregar
a que sus propias páginas web.

59
00:02:43,300 --> 00:02:47,655
Quiero decir, en CS50 Finanzas, usted debe tener
añadido algunas páginas HTML, que son,

60
00:02:47,655 --> 00:02:49,410
clase de, envuelto en la envoltura PHP.

61
00:02:49,410 --> 00:02:54,690
Pero al final, lo que sus páginas PHP
fueron salida era HTML.

62
00:02:54,690 --> 00:02:58,210
>> Pero pensando en volver a los orígenes
del PSET, tuvimos que establecer

63
00:02:58,210 --> 00:03:00,890
los permisos para todo, ¿verdad?

64
00:03:00,890 --> 00:03:07,270
Así que esto sólo básicamente nos permite saber
¿quién puede leer, escribir, y posiblemente

65
00:03:07,270 --> 00:03:08,730
ejecutar cada uno de los archivos.

66
00:03:08,730 --> 00:03:11,870
Así que vamos a hacer una rápida - hm?

67
00:03:11,870 --> 00:03:15,660
>> TOMAS REIMERS: Así que vamos
para hacer una demostración rápida.

68
00:03:15,660 --> 00:03:19,560
Así que para recordar a usted, cuando usted
conectarse al equipo de Google -

69
00:03:19,560 --> 00:03:20,690
quien -

70
00:03:20,690 --> 00:03:24,060
y pedir un archivo, la computadora primero
hay que asegurarse de que está autorizado

71
00:03:24,060 --> 00:03:28,790
para realmente ver ese archivo o leer que
presentar porque no se puede simplemente pregunta

72
00:03:28,790 --> 00:03:30,430
para cualquier archivo en ese equipo, ¿no?

73
00:03:30,430 --> 00:03:32,260
Eso sería un riesgo de seguridad.

74
00:03:32,260 --> 00:03:37,020
>> Así que los archivos de los sistemas que utilizamos, como
este aparato CS50, tiene tres

75
00:03:37,020 --> 00:03:39,200
general, las personas que pueden tener
permisos a algo.

76
00:03:39,200 --> 00:03:41,610
La primera es la real
propietario de dicho archivo.

77
00:03:41,610 --> 00:03:43,820
El segundo es el grupo que
pertenece el archivo.

78
00:03:43,820 --> 00:03:46,090
No nos vamos a centrar
demasiado en eso.

79
00:03:46,090 --> 00:03:50,010
Y lo último es, más o menos, como el
mundo, o como todo el mundo quién es

80
00:03:50,010 --> 00:03:54,130
no es específico de ese archivo y no
tener derechos de propiedad sobre ella.

81
00:03:54,130 --> 00:04:05,650
>> Así que si tenemos el propietario, grupo,
y luego mundo.

82
00:04:05,650 --> 00:04:10,510
Y luego, para cada uno de estos grupos, se
puede tener uno de tres permisos,

83
00:04:10,510 --> 00:04:13,010
OK, o múltiplo de ellos.

84
00:04:13,010 --> 00:04:15,070
Usted puede tener permisos de lectura.

85
00:04:15,070 --> 00:04:16,560
Usted puede contar con los permisos adecuados.

86
00:04:16,560 --> 00:04:18,880
Y usted puede tener permisos de ejecución.

87
00:04:18,880 --> 00:04:22,060
>> Así que en términos de tipos de archivo reales, lea
el permiso es como en realidad la lectura

88
00:04:22,060 --> 00:04:23,250
el contenido del archivo.

89
00:04:23,250 --> 00:04:24,730
Un permiso derecha está escribiendo
a dicho archivo.

90
00:04:24,730 --> 00:04:28,370
Un permiso de ejecución se está ejecutando el
presentar como se hace cuando se ejecuta una de

91
00:04:28,370 --> 00:04:29,620
sus proyectos CS50.

92
00:04:29,620 --> 00:04:32,190

93
00:04:32,190 --> 00:04:38,820
>> Por eso, cuando estamos pensando en archivos
como cuando necesitamos leer un archivo HTML

94
00:04:38,820 --> 00:04:41,790
archivo, que tiene que ser mundo
legible, ¿verdad?

95
00:04:41,790 --> 00:04:44,420
Presumiblemente, también el propietario quiere
ser capaz de editar ese archivo.

96
00:04:44,420 --> 00:04:46,610
Así que el dueño va a necesitar
permisos de lectura y escritura.

97
00:04:46,610 --> 00:04:48,710
En realidad, no es necesario ejecutar.

98
00:04:48,710 --> 00:04:50,950
>> Grupo, que vamos a tratar el
mismo que el mundo de hoy.

99
00:04:50,950 --> 00:04:54,610
Por lo que necesitan permisos de lectura.

100
00:04:54,610 --> 00:04:57,310
Pero no es necesario escribir
o permisos de ejecución.

101
00:04:57,310 --> 00:05:01,920
Y ahora, si pensamos en volver a la antigua
Conjuntos de procesadores, lo que nos damos cuenta es que este tipo

102
00:05:01,920 --> 00:05:03,360
de parecerse a binario, ¿verdad?

103
00:05:03,360 --> 00:05:04,210
1 significa que sí.

104
00:05:04,210 --> 00:05:05,040
0 para no.

105
00:05:05,040 --> 00:05:06,870
Y en realidad podemos traducir
este a binario.

106
00:05:06,870 --> 00:05:10,478
>> Así que 110 en binario sería 6.

107
00:05:10,478 --> 00:05:13,270
100 sería 4.

108
00:05:13,270 --> 00:05:14,690
Lo mismo con el mundo.

109
00:05:14,690 --> 00:05:20,846
Así que el número al que obtendría para el
permisos para esto serían 644.

110
00:05:20,846 --> 00:05:24,400
>> MIKE RIZZO: Y si usted piensa de nuevo a
cuando se efectuó chmod algo, creo

111
00:05:24,400 --> 00:05:28,980
dieron en el conjunto de problemas de la
ejemplo de donde se podía hacer

112
00:05:28,980 --> 00:05:36,470
algo como chmod 644
y luego el nombre del archivo.

113
00:05:36,470 --> 00:05:39,980
El 644 entonces, ahora se puede ver directamente
de dónde viene eso.

114
00:05:39,980 --> 00:05:42,840
Así que espero que eso hace que
un poco más clara.

115
00:05:42,840 --> 00:05:45,600
>> Y a continuación, para mayor claridad de que tipo -

116
00:05:45,600 --> 00:05:48,200
oh, sí, aquí esto es nuevo.

117
00:05:48,200 --> 00:05:53,260
Así que 600 entonces no sería más que el ejemplo
nos dimos por vencidos aquí donde el propietario tiene

118
00:05:53,260 --> 00:05:56,360
permisos de lectura y derecha mientras que el grupo
y el mundo no tienen ningún permiso

119
00:05:56,360 --> 00:05:58,145
para acceder al archivo.

120
00:05:58,145 --> 00:06:01,500
>> TOMAS REIMERS: Y luego tenemos una rápida
lista de permisos comunes.

121
00:06:01,500 --> 00:06:05,250
Así directorios te quieres
chmod realidad 711.

122
00:06:05,250 --> 00:06:08,930
Aparte rápida - para un directorio para tener
permiso de ejecución significa poder

123
00:06:08,930 --> 00:06:11,680
para abrir el directorio.

124
00:06:11,680 --> 00:06:15,280
Las imágenes, CSS, JavaScript, HTML necesidades
644, ya que, básicamente, el mundo

125
00:06:15,280 --> 00:06:16,400
necesidades permisos de lectura.

126
00:06:16,400 --> 00:06:20,960
>> Y PHP, lo que ustedes han visto
aunque no vamos a estar hablando de él

127
00:06:20,960 --> 00:06:24,880
estrictamente normalmente se efectuó chmod con
permiso 600 porque se ejecuta con

128
00:06:24,880 --> 00:06:26,540
los permisos del propietario.

129
00:06:26,540 --> 00:06:27,790
Al menos en el aparato.

130
00:06:27,790 --> 00:06:30,200

131
00:06:30,200 --> 00:06:36,870
>> MIKE RIZZO: Así que si no lo hace específicamente
especificar el tipo de archivo

132
00:06:36,870 --> 00:06:39,480
que desee en la configuración realidad
esta presentación -

133
00:06:39,480 --> 00:06:43,490
hemos tenido un problema con esto porque
todo lo que no se efectuó chmod correctamente -

134
00:06:43,490 --> 00:06:47,550
usted va a conseguir, una especie de, una
error prohibido que el sitio web

135
00:06:47,550 --> 00:06:49,700
en realidad no tener permiso
para acceder a cualquier archivo

136
00:06:49,700 --> 00:06:51,370
desea que se accede.

137
00:06:51,370 --> 00:06:54,780
Y, por supuesto, que se puede fijar -
como en el conjunto de problemas - al cambiar

138
00:06:54,780 --> 00:06:56,405
permisos correctamente.

139
00:06:56,405 --> 00:06:59,620
>> TOMAS REIMERS: Y el último comentario para
desarrollo rápido local es - nos

140
00:06:59,620 --> 00:07:02,000
traído esto, pero lo único que queríamos
para traer de nuevo -

141
00:07:02,000 --> 00:07:06,230
si usted pide un servidor - huésped tan local,
por ejemplo, com o lo que sea. -

142
00:07:06,230 --> 00:07:09,170
y no se especifica un archivo concreto,
el archivo que el equipo va

143
00:07:09,170 --> 00:07:11,540
para pedir que se llama index.html.

144
00:07:11,540 --> 00:07:12,790
O si eso no existe, index.php.

145
00:07:12,790 --> 00:07:15,560

146
00:07:15,560 --> 00:07:16,350
>> Genial.

147
00:07:16,350 --> 00:07:19,560
Así que eso es sólo una recapitulación de todo,
con suerte, que hemos cubierto en

148
00:07:19,560 --> 00:07:22,800
sección, y una conferencia,
y hasta el momento en CS50.

149
00:07:22,800 --> 00:07:26,110
Y ahora vamos a empezar a hablar
bibliotecas sobre concreto.

150
00:07:26,110 --> 00:07:30,270
Bibliotecas de JavaScript y CSS
para aplicaciones web.

151
00:07:30,270 --> 00:07:36,350
>> Así que una de las razones por la que tenemos rápida
bibliotecas es la programación -

152
00:07:36,350 --> 00:07:39,000
hay un montón de problemas en
programación, que siguen apareciendo

153
00:07:39,000 --> 00:07:40,570
otra vez, y otra vez, y otra vez.

154
00:07:40,570 --> 00:07:43,870
Usted puede notar que una gran cantidad de sitios web
necesita la capacidad de tener desplegables

155
00:07:43,870 --> 00:07:49,100
menús, por ejemplo, o necesitan la capacidad
para tener una tecla muy estándar

156
00:07:49,100 --> 00:07:51,400
estilo, que puede no ser
la cosa más fácil.

157
00:07:51,400 --> 00:07:54,670
Ahora que usted comienza a entrar en HTML,
darse cuenta de que los botones pueden realmente

158
00:07:54,670 --> 00:07:57,720
mirar muy feo si
no hagas nada.

159
00:07:57,720 --> 00:08:00,830
>> Así que un montón de gente ha escrito
llamado bibliotecas.

160
00:08:00,830 --> 00:08:02,990
Y en este contexto, son
también llamado marcos.

161
00:08:02,990 --> 00:08:04,790
Vamos a utilizar el
dos indistintamente.

162
00:08:04,790 --> 00:08:07,360
Y lo que son es que son básicamente
piezas prefabricadas de código -

163
00:08:07,360 --> 00:08:09,130
ya sea CSS o JavaScript -

164
00:08:09,130 --> 00:08:13,240
que llevar una gran cantidad de la
equipo que tiene en la codificación.

165
00:08:13,240 --> 00:08:17,290
>> Así que predefinir un montón de clases o
pre-definir un manojo de funciones para

166
00:08:17,290 --> 00:08:20,110
El caso de JavaScript, que
puede llamar más tarde.

167
00:08:20,110 --> 00:08:22,690
Y entonces usted puede, más o menos, obtener
el acceso a este código sin

168
00:08:22,690 --> 00:08:23,710
tener que hacer nada.

169
00:08:23,710 --> 00:08:27,750
Un ejemplo de la biblioteca era CS50.H.
Esa fue una biblioteca que dimos a usted de nuevo

170
00:08:27,750 --> 00:08:32,090
en la primera semana, lo que permitió que hagas
cosas así GetInt y GetString

171
00:08:32,090 --> 00:08:35,237
sin tener que escribir
cualquier código manualmente.

172
00:08:35,237 --> 00:08:36,179
>> MIKE RIZZO: Muy bien.

173
00:08:36,179 --> 00:08:40,299
Así que aquí, al igual que hemos tenido que incluir
en nuestra c archivos los diferentes

174
00:08:40,299 --> 00:08:46,570
bibliotecas, también hay que incluir en
archivos de nuestro HTML distintas bibliotecas.

175
00:08:46,570 --> 00:08:50,310
Por ejemplo, si quisiéramos incluir
una biblioteca de JavaScript específico aquí,

176
00:08:50,310 --> 00:08:52,850
tal vez, uno que hemos escrito
nosotros mismos, ya que está alojado de forma local

177
00:08:52,850 --> 00:08:56,000
llamados script.js, sólo
utilizar esta notación.

178
00:08:56,000 --> 00:08:59,500
>> Así que tenemos iguales tipo guión
JavaScript fuente iguales

179
00:08:59,500 --> 00:09:01,260
JavaScript.js.

180
00:09:01,260 --> 00:09:05,190
Y si usted piensa de nuevo a su CS50
problema financiero establecido, si uno mira en

181
00:09:05,190 --> 00:09:09,190
header.php en la carpeta de plantillas,
usted debe haber visto

182
00:09:09,190 --> 00:09:10,970
algunos de ellos incluidos.

183
00:09:10,970 --> 00:09:13,250
Así que este primero - los scripts -

184
00:09:13,250 --> 00:09:16,080
es que incluye una biblioteca de JavaScript.

185
00:09:16,080 --> 00:09:18,760
Incluye una biblioteca de CSS es
un poco diferente.

186
00:09:18,760 --> 00:09:21,430
>> Aquí, en lugar de la secuencia de comandos
ETIQUETA usted necesita la etiqueta de enlace.

187
00:09:21,430 --> 00:09:27,110
Y a continuación, el tipo de texto CSS
es un poco diferente.

188
00:09:27,110 --> 00:09:29,270
No siempre tiene que incluir
hoja de estilo rel.

189
00:09:29,270 --> 00:09:30,970
Pero yo creo que es, en general,
buenas prácticas.

190
00:09:30,970 --> 00:09:35,810
>> Y, finalmente, el HREF, que
Probablemente vio en sus ATAGs para vincular

191
00:09:35,810 --> 00:09:39,440
en diferentes eslabones sólo especifica las
el enlace de dónde encontrar eso.

192
00:09:39,440 --> 00:09:42,250
Por ejemplo, si quisiéramos vincular un
diferente de la biblioteca - digamos -

193
00:09:42,250 --> 00:09:49,330
que vivió a styles.css.

194
00:09:49,330 --> 00:09:54,030
Y queríamos vincular que en eso es
alojada en la web, queremos copiar eso.

195
00:09:54,030 --> 00:09:58,834
Y luego pegarla en cualquier
que aquí tenemos en su lugar.

196
00:09:58,834 --> 00:10:01,340
>> TOMAS REIMERS: OK, esperamos que pueda
chicos ya están familiarizados

197
00:10:01,340 --> 00:10:02,410
con la forma de vincular CSS.

198
00:10:02,410 --> 00:10:04,000
Tenías que hacer eso en
su último conjunto marrón.

199
00:10:04,000 --> 00:10:07,110
JavaScript, algunos de ustedes tal vez
tener algo de experiencia con.

200
00:10:07,110 --> 00:10:07,980
Algunos de ustedes puede que no.

201
00:10:07,980 --> 00:10:12,190
>> Así que por ahora, saber que un archivo JavaScript
es muy parecido a un archivo CSS en

202
00:10:12,190 --> 00:10:15,640
el sentido de que se puede enlazar con él o
que se pueden incluir de forma interna.

203
00:10:15,640 --> 00:10:17,360
Y es que permite a las cosas de guión.

204
00:10:17,360 --> 00:10:21,820
Y vamos a caminar a través de un
poco de JavaScript más adelante.

205
00:10:21,820 --> 00:10:23,560
>> Así, utilizando una biblioteca -

206
00:10:23,560 --> 00:10:26,150
una vez que se ha incluido él, es como
simple como literalmente llamando al

207
00:10:26,150 --> 00:10:29,640
funciones o la adición de la
nombres de clase a la misma.

208
00:10:29,640 --> 00:10:32,220
La última cosa que queremos hablar
aproximadamente, en términos de la biblioteca -

209
00:10:32,220 --> 00:10:34,180
y esto es más de una nota técnica -

210
00:10:34,180 --> 00:10:35,860
es la concesión de licencias de código abierto.

211
00:10:35,860 --> 00:10:41,550
Así que cuando usted encuentra estas bibliotecas reales,
usted puede estar pensando en

212
00:10:41,550 --> 00:10:47,630
Preguntas como ¿está bien que sólo soy
utilizando el código de otra persona, especialmente

213
00:10:47,630 --> 00:10:51,970
porque eso es algo que en gran medida
Te dije que no lo hacen en este curso.

214
00:10:51,970 --> 00:10:55,790
>> Así que en el caso de las licencias de código abierto,
muchos de los desarrolladores -

215
00:10:55,790 --> 00:10:57,540
una vez que han escrito una biblioteca,
que piensan que podría ser

216
00:10:57,540 --> 00:10:59,450
útil a otras personas -

217
00:10:59,450 --> 00:11:02,420
lo publicará en la web
y darle una licencia.

218
00:11:02,420 --> 00:11:06,620
Y una licencia básicamente dice que soy la presente
la concesión de permisos a otros

219
00:11:06,620 --> 00:11:11,250
las personas a utilizar este software
con el siguiente tipo de

220
00:11:11,250 --> 00:11:13,230
estipulaciones.

221
00:11:13,230 --> 00:11:16,100
>> Hemos incluido un enlace a un buen sitio para
ayudarle a entender las licencias de

222
00:11:16,100 --> 00:11:17,720
caso de que encuentre en ellos.

223
00:11:17,720 --> 00:11:21,680
Estipulaciones comunes son cosas como
le invitamos a usar mi biblioteca para

224
00:11:21,680 --> 00:11:23,000
siempre y cuando se nombre al autor.

225
00:11:23,000 --> 00:11:25,670
Le invitamos a usar mi biblioteca
siempre que cuando se rompe

226
00:11:25,670 --> 00:11:26,790
no me culpes.

227
00:11:26,790 --> 00:11:30,310
Le invitamos a usar mi biblioteca tanto tiempo
y cuando no lo utilice para hacer dinero

228
00:11:30,310 --> 00:11:31,910
por sí mismo.

229
00:11:31,910 --> 00:11:34,130
Estos son tipos de común
estipulaciones.

230
00:11:34,130 --> 00:11:37,780
>> Para este proyecto final CS50, que
no debe ser súper relevante porque

231
00:11:37,780 --> 00:11:41,440
los proyectos que ustedes SU USO
probablemente más bien, una especie de, conocido.

232
00:11:41,440 --> 00:11:44,170
Pero cuando realmente salir al
mundo y comenzar a usar las bibliotecas, las cuales

233
00:11:44,170 --> 00:11:48,100
pueden o no ser tan bien implementado como
algunos de los más populares que estamos

234
00:11:48,100 --> 00:11:49,780
va a estar pasando.

235
00:11:49,780 --> 00:11:53,310
Es bueno ser capaz de entender
estas licencias ya

236
00:11:53,310 --> 00:11:54,560
entender lo que significan.

237
00:11:54,560 --> 00:11:58,120

238
00:11:58,120 --> 00:11:58,586
Y volviendo.

239
00:11:58,586 --> 00:12:00,960
>> MIKE RIZZO: OK.

240
00:12:00,960 --> 00:12:04,850
Así que ahora pasar a ejemplos
de CSS real.

241
00:12:04,850 --> 00:12:07,770
En este punto, hasta el momento, es posible que
no se han encontrado con esto.

242
00:12:07,770 --> 00:12:10,300
Pero es posible que haya encontrado en
su vida cotidiana en el que algo

243
00:12:10,300 --> 00:12:13,160
que se ve de una manera en un navegador
podrían no tener el mismo aspecto

244
00:12:13,160 --> 00:12:14,880
forma en otro navegador.

245
00:12:14,880 --> 00:12:17,400
>> Esto se llama navegador navegador
compatibilidad.

246
00:12:17,400 --> 00:12:20,780
Y cada vez se está volviendo más y
más de un problema, especialmente en lo

247
00:12:20,780 --> 00:12:25,260
navegadores toman más y más libertades
para poner en práctica las cosas como ellos quieren.

248
00:12:25,260 --> 00:12:28,440
Así que para superar eso, hay en realidad es
una gran biblioteca llamada Normalize.CSS.

249
00:12:28,440 --> 00:12:32,236

250
00:12:32,236 --> 00:12:33,770
>> TOMAS REIMERS: Se incluyeron en el vínculo.

251
00:12:33,770 --> 00:12:36,210
En este punto, es útil si
usted tiene su computadora portátil en la que hay

252
00:12:36,210 --> 00:12:38,740
buscando en el sitio.

253
00:12:38,740 --> 00:12:42,580
Y estamos dando esto a usted derecho
ahora simplemente porque la final CS50

254
00:12:42,580 --> 00:12:44,370
proyecto es en realidad va a
pedirle que implementarlo

255
00:12:44,370 --> 00:12:45,860
de manera similar y por medio de los navegadores.

256
00:12:45,860 --> 00:12:49,250
>> Así que para mantener en la parte posterior de su
la cabeza, esto es una biblioteca maravillosa

257
00:12:49,250 --> 00:12:51,170
porque será, más o menos,
normalizar las cosas.

258
00:12:51,170 --> 00:12:54,230
En Firefox, algo puede mostrar
como un píxel hacia la izquierda.

259
00:12:54,230 --> 00:12:58,390
Y luego Chrome puede decidir que en realidad
lo que quería decir era 10 píxeles

260
00:12:58,390 --> 00:12:59,380
a la izquierda.

261
00:12:59,380 --> 00:13:01,030
Y desea estandarizar esto.

262
00:13:01,030 --> 00:13:05,360
Normalizar hará realmente una muy buena
trabajo de asegurarse de que su sitio

263
00:13:05,360 --> 00:13:08,070
tiene el mismo aspecto en todos los navegadores.

264
00:13:08,070 --> 00:13:10,660
>> MIKE RIZZO: Así que si queríamos simplemente
haga clic en el vínculo muy rápido y el espectáculo

265
00:13:10,660 --> 00:13:13,140
lo que parece, usted
puede descargar usando el

266
00:13:13,140 --> 00:13:14,670
gigante botón Descargar.

267
00:13:14,670 --> 00:13:18,520
O le animo a leer mas sobre esto
haciendo clic en este enlace en la parte inferior

268
00:13:18,520 --> 00:13:19,310
esquina derecha.

269
00:13:19,310 --> 00:13:22,420
>> TOMAS REIMERS: ¿Y si en realidad
haga clic en Leer Más justo allí -

270
00:13:22,420 --> 00:13:24,340
haga clic en la fuente en GitHub -

271
00:13:24,340 --> 00:13:31,720
que realmente va a ver el código abierto
otorgar una licencia en LICENSE.md allí.

272
00:13:31,720 --> 00:13:35,740
Y usted ve aquí es la
licencia MIT muy popular.

273
00:13:35,740 --> 00:13:38,940
Una vez más, si usted lee a través del texto,
usted será capaz de encontrarlo en el sitio

274
00:13:38,940 --> 00:13:42,550
hicimos referencia antes y ser capaces de
entender sin tener que leer

275
00:13:42,550 --> 00:13:45,920
a través de la jerga jurídica.

276
00:13:45,920 --> 00:13:46,850
>> MIKE RIZZO: OK, muy bien.

277
00:13:46,850 --> 00:13:47,940
Así que eso es Normalizar.

278
00:13:47,940 --> 00:13:49,190
Queríamos darle
que realmente rápidamente.

279
00:13:49,190 --> 00:13:50,030
Oh, ¿tienes alguna pregunta?

280
00:13:50,030 --> 00:13:53,013
>> AUDIENCIA: Así que cuando se descarga, se
sólo tienes que seguir el código que tienen

281
00:13:53,013 --> 00:13:54,098
bajo el botón de descarga?

282
00:13:54,098 --> 00:13:55,860
>> TOMAS REIMERS: Sí, por lo que
al descargar -

283
00:13:55,860 --> 00:13:58,130
>> MIKE RIZZO: Oh, eso es un gran punto.

284
00:13:58,130 --> 00:14:00,700
Así que la pregunta era cómo hacer
que en realidad descargar?

285
00:14:00,700 --> 00:14:03,260
Así que si hacemos clic en el enlace, vemos
que en realidad aparece

286
00:14:03,260 --> 00:14:05,030
en el código fuente.

287
00:14:05,030 --> 00:14:08,550
Así que para hacer esto, lo que hemos podido
no es simplemente haga clic en Guardar como.

288
00:14:08,550 --> 00:14:10,830
Guardar como y que en caso de
abrir un archivo.

289
00:14:10,830 --> 00:14:14,160
Y entonces podemos optar por guardar
como normalize.CSS.

290
00:14:14,160 --> 00:14:15,810
Y luego habría que vincularlo en -

291
00:14:15,810 --> 00:14:18,660
>> TOMAS REIMERS: De la misma manera que
relacionar en cualquier otro archivo.

292
00:14:18,660 --> 00:14:22,250
Y una vez que lo enlace en, lo que es genial
sobre Normalizar es en realidad va a

293
00:14:22,250 --> 00:14:25,920
hacerse cargo de todo el duro
trabajar por sí mismo.

294
00:14:25,920 --> 00:14:27,730
Lo que significa que usted no tiene
añadir ninguna clase.

295
00:14:27,730 --> 00:14:29,690
>> Usted no tiene que hacer nada raro.

296
00:14:29,690 --> 00:14:34,590
Se normalizará sin ti
hacer nada más.

297
00:14:34,590 --> 00:14:36,083
Sí, usted tiene que incluirlo.

298
00:14:36,083 --> 00:14:38,990

299
00:14:38,990 --> 00:14:40,240
Google Chrome no está respondiendo.

300
00:14:40,240 --> 00:14:43,270

301
00:14:43,270 --> 00:14:44,860
>> Sólo una rápida lado -

302
00:14:44,860 --> 00:14:46,800
Me di cuenta de que nos metió en esto.

303
00:14:46,800 --> 00:14:49,010
El resto de esta presentación es
va a ser un resumen rápido.

304
00:14:49,010 --> 00:14:50,380
Una encuesta de las bibliotecas.

305
00:14:50,380 --> 00:14:52,710
>> Básicamente, lo que son.

306
00:14:52,710 --> 00:14:53,350
Lo que ellos hacen.

307
00:14:53,350 --> 00:14:54,060
¿Cómo son útiles.

308
00:14:54,060 --> 00:14:56,540
¿Cómo es posible ponerlas en práctica.

309
00:14:56,540 --> 00:14:59,730
Si quieres empezar a mirarlos,
siguiendo a lo largo, y de la lectura a través de

310
00:14:59,730 --> 00:15:01,990
ellos, yo les animo a que.

311
00:15:01,990 --> 00:15:07,620
>> Como alternativa, le invitamos también a
empezar a descargar ellos y que incluye

312
00:15:07,620 --> 00:15:11,400
en un espectáculo sólo para ver lo que
parezca o qué hacer si tiene

313
00:15:11,400 --> 00:15:12,270
su computadora portátil en frente de usted.

314
00:15:12,270 --> 00:15:14,650
Si no es así, le invitamos a seguir
nos escucha hablar.

315
00:15:14,650 --> 00:15:15,500
Vamos a seguir hablando.

316
00:15:15,500 --> 00:15:18,680
Y tenemos tiempo al final, con suerte
vamos a realmente entrar en mostrándote

317
00:15:18,680 --> 00:15:20,946
lo que algunas de estas bibliotecas
ser similar.

318
00:15:20,946 --> 00:15:22,320
>> MIKE RIZZO: Cool.

319
00:15:22,320 --> 00:15:25,466
Muy bien, así que ahora vamos a hablar
sobre Font impresionante.

320
00:15:25,466 --> 00:15:30,480
>> TOMAS REIMERS: Awesome modo de fuente es una
sitio realmente fantástico, especialmente para aquellos

321
00:15:30,480 --> 00:15:32,450
de nosotros que son menos artísticamente
talentoso.

322
00:15:32,450 --> 00:15:36,330

323
00:15:36,330 --> 00:15:38,880
Ignorando el Nombre de fuente impresionante, da
que un montón de iconos, que son

324
00:15:38,880 --> 00:15:41,050
muy útil.

325
00:15:41,050 --> 00:15:45,950
Así que un montón de veces que se va a implementar un
ICON es posible que desee como un bonito x lo

326
00:15:45,950 --> 00:15:47,170
que se puede cerrar algo.

327
00:15:47,170 --> 00:15:49,910
>> O puede que quiera algún tipo de botón Editar
con un dibujo a lápiz como

328
00:15:49,910 --> 00:15:50,940
todo el mundo tiene.

329
00:15:50,940 --> 00:15:53,850
Y ahí es cuando se entera de que
dibujo de los iconos puede ser

330
00:15:53,850 --> 00:15:55,510
muy tedioso y difícil.

331
00:15:55,510 --> 00:15:59,160
Fuente impresionante - si en realidad
ir al sitio -

332
00:15:59,160 --> 00:16:02,892
te da un montón de iconos bajo
los iconos de la parte superior.

333
00:16:02,892 --> 00:16:06,980
Sí, sólo la parte superior.

334
00:16:06,980 --> 00:16:09,030
Se le dará una gran cantidad
de iconos gratis.

335
00:16:09,030 --> 00:16:15,210
>> Así que aquí ves que tenemos cosas como un
asterisco, bares, un rayo, un

336
00:16:15,210 --> 00:16:19,750
calendario, un insecto, un libro, etc.

337
00:16:19,750 --> 00:16:21,110
Esto puede ser muy útil.

338
00:16:21,110 --> 00:16:24,290
La forma en que se incluye este es incluir
literalmente, el archivo CSS.

339
00:16:24,290 --> 00:16:29,760
Y después de haber incluido el archivo CSS,
lo que puede hacer es crear un

340
00:16:29,760 --> 00:16:33,430
etiqueta llamada I. satands TI para
Icono con la clase FA

341
00:16:33,430 --> 00:16:34,460
de pie para Font impresionante.

342
00:16:34,460 --> 00:16:36,330
Y luego, cualquiera que sea la clase que usted desea.

343
00:16:36,330 --> 00:16:41,220
>> Así que si quería un icono de este plus
cuadrar aquí, yo le daría

344
00:16:41,220 --> 00:16:43,290
que la clase FA.

345
00:16:43,290 --> 00:16:46,230
Y entonces guión FA plus cuadrado guión.

346
00:16:46,230 --> 00:16:50,325

347
00:16:50,325 --> 00:16:53,710
>> MIKE RIZZO: Cool, OK.

348
00:16:53,710 --> 00:16:56,980
>> TOMAS REIMERS: Y entonces, la última CSS
biblioteca que queremos conseguir a través de nosotros

349
00:16:56,980 --> 00:16:59,950
tratando de mantener lo mínimo sobre CSS
bibliotecas, porque nos damos cuenta de la

350
00:16:59,950 --> 00:17:03,660
título de esta presentación
es JavaScript Bibliotecas.

351
00:17:03,660 --> 00:17:07,089
Pero pensamos que podamos, así
presentarte a otras bibliotecas

352
00:17:07,089 --> 00:17:09,569
mientras hablábamos acerca de las bibliotecas.

353
00:17:09,569 --> 00:17:11,400
>> Es Google Web Fonts.

354
00:17:11,400 --> 00:17:17,040
Y lo que Google Web Fonts le permite
hacer es agregar las fuentes a su sitio web,

355
00:17:17,040 --> 00:17:22,079
que es una manera muy fácil de hacerlo
bonita y distinguir el conjunto de

356
00:17:22,079 --> 00:17:24,460
de todos los demás es si tiene
una fuente agradable o si se tiene un buen

357
00:17:24,460 --> 00:17:27,790
colección de fuentes.

358
00:17:27,790 --> 00:17:31,410
Google Web Fonts es agradable a diferencia de otros
bibliotecas en el sentido de que es un

359
00:17:31,410 --> 00:17:33,490
instalación realmente guiada.

360
00:17:33,490 --> 00:17:38,680
>> Así que si usted sigue el enlace, es
google.com / fonts, creo.

361
00:17:38,680 --> 00:17:41,100
Si sigue esto,
puede elegir el tipo de letra.

362
00:17:41,100 --> 00:17:44,410
Usted puede elegir a la izquierda de
espesor, inclinación, etc.

363
00:17:44,410 --> 00:17:48,970
Y luego, una vez que haya elegido uno,
puede hacer clic en el uso rápido.

364
00:17:48,970 --> 00:17:49,820
Ahí mismo.

365
00:17:49,820 --> 00:17:51,590
Abajo a la derecha de la caja.

366
00:17:51,590 --> 00:17:54,380

367
00:17:54,380 --> 00:17:56,700
>> Y luego, desplácese hacia abajo.

368
00:17:56,700 --> 00:17:59,600

369
00:17:59,600 --> 00:18:02,650
En primer lugar, te dan la CSS que
es necesario enlazar realmente a ella.

370
00:18:02,650 --> 00:18:03,330
Está justo allí.

371
00:18:03,330 --> 00:18:05,170
Usted puede simplemente copiar y pegar ese pulg

372
00:18:05,170 --> 00:18:07,250
Y lo bueno de esto es
que en realidad no siquiera necesita

373
00:18:07,250 --> 00:18:08,340
descargar el archivo.

374
00:18:08,340 --> 00:18:11,170
>> ¿Qué se va a hacer es que va
vincular a la versión de Google de la misma.

375
00:18:11,170 --> 00:18:14,130
Así que de vuelta a lo que significa eso.

376
00:18:14,130 --> 00:18:18,270
Esto significa que cuando un usuario
descarga tu archivo -

377
00:18:18,270 --> 00:18:22,300
descarga tu página HTML - su HTML
la página se va a hacer referencia a este archivo.

378
00:18:22,300 --> 00:18:26,790
>> Así pues, el equipo va a ver,
oh, está alojado en google.com en lugar

379
00:18:26,790 --> 00:18:28,170
que en theirsite.com.

380
00:18:28,170 --> 00:18:30,370
Déjame ir a preguntar Google para ese archivo.

381
00:18:30,370 --> 00:18:32,800
Y luego, se va a incluir
casi como si se tratara de un

382
00:18:32,800 --> 00:18:35,584
parte de tu propio sitio.

383
00:18:35,584 --> 00:18:36,540
>> TOMAS REIMERS: Cool.

384
00:18:36,540 --> 00:18:40,980
Y una vez que se incluye que, a continuación, a
incluirlo en tu CSS, le da

385
00:18:40,980 --> 00:18:41,830
la línea real.

386
00:18:41,830 --> 00:18:45,188
Así se establece la familia de fuentes de propiedad
igual al nombre de su fuente.

387
00:18:45,188 --> 00:18:47,936

388
00:18:47,936 --> 00:18:50,440
>> MIKE RIZZO: OK.

389
00:18:50,440 --> 00:18:52,220
Así que acabamos de terminar con CSS.

390
00:18:52,220 --> 00:18:57,230
Y algunos de ustedes podrían estar pensando, bueno,
tuvimos algo de CSS en CS50 Finanzas.

391
00:18:57,230 --> 00:19:00,390
Pero biblioteca CSS fue de arranque.

392
00:19:00,390 --> 00:19:05,190
En realidad nos incluimos Bootstrap un poco
más adelante bajo JavaScript porque con

393
00:19:05,190 --> 00:19:09,660
la biblioteca Bootstrap CSS también viene
con un montón de JavaScript que

394
00:19:09,660 --> 00:19:12,060
Bootstrap o Twitter -
quien hizo Bootstrap -

395
00:19:12,060 --> 00:19:15,426
utiliza para gestionar la totalidad de su CSS.

396
00:19:15,426 --> 00:19:19,592
>> TOMAS REIMERS: ¿Alguien tiene alguna
preguntas hasta ahora sobre CSS en general?

397
00:19:19,592 --> 00:19:20,723
Estamos bien?

398
00:19:20,723 --> 00:19:21,216
Impresionante.

399
00:19:21,216 --> 00:19:22,495
>> MIKE RIZZO: Awesome.

400
00:19:22,495 --> 00:19:25,136
>> TOMAS REIMERS: Así se mueve
en tener JavaScript.

401
00:19:25,136 --> 00:19:27,900
>> MIKE RIZZO: Así que quería hablar
sobre jQuery, para empezar.

402
00:19:27,900 --> 00:19:30,780
¿Alguien ha oído hablar de jQuery
antes o usado?

403
00:19:30,780 --> 00:19:32,180
Sí, un par?

404
00:19:32,180 --> 00:19:36,000
Así que si usted acaba de trabajar con nativos
JavaScript se encontrará

405
00:19:36,000 --> 00:19:41,000
escribiendo un montón de selectores largos mucho.

406
00:19:41,000 --> 00:19:44,400
Entonces, ¿qué jQuery hace es que proporciona
un bonito envoltorio para el código JavaScript

407
00:19:44,400 --> 00:19:48,180
lenguaje que le permite seleccionar fácilmente
y manipular diferentes elementos

408
00:19:48,180 --> 00:19:52,470
dentro del modelo de objetos de documento de la
la página web o el DOM, que creo que

409
00:19:52,470 --> 00:19:54,290
ustedes han oído hablar de en
dar una conferencia en este punto.

410
00:19:54,290 --> 00:19:57,550
>> TOMAS REIMERS: Si usted no ha oído hablar de
o la conferencia si no has visto

411
00:19:57,550 --> 00:20:01,870
sin embargo, es el Document Object Model
básicamente cómo se representan las cosas.

412
00:20:01,870 --> 00:20:05,290
Así HTML manera se parece a un árbol
cuando en realidad lo alcanzará.

413
00:20:05,290 --> 00:20:06,850
Usted tiene el elemento HTML en la parte superior.

414
00:20:06,850 --> 00:20:07,560
Usted tiene la cabeza y el cuerpo.

415
00:20:07,560 --> 00:20:09,500
>> Y luego, dentro de que se
tiene todo lo demás.

416
00:20:09,500 --> 00:20:10,660
Eso se conoce como el DOM -

417
00:20:10,660 --> 00:20:12,120
Document Object Model.

418
00:20:12,120 --> 00:20:16,090
Así que un modelo que representa los objetos en
el documento es una manera fácil de pensar

419
00:20:16,090 --> 00:20:18,560
sobre eso.

420
00:20:18,560 --> 00:20:22,520
Y uno de la gran cosa acerca de jQuery
es lo que realmente hace de desplazamiento

421
00:20:22,520 --> 00:20:26,460
y que la manipulación de elementos dentro de
que increíblemente simple.

422
00:20:26,460 --> 00:20:30,300
>> Así simple, de hecho, que la mayoría de los
JavaScript bibliotecas o si no el

423
00:20:30,300 --> 00:20:34,200
mayoría, la gran mayoría de los
usted verá realmente requieren jQuery por lo

424
00:20:34,200 --> 00:20:37,530
que puedan funcionar a sí mismos simplemente
porque si usted no tiene jQuery, que

425
00:20:37,530 --> 00:20:40,540
sería perder mucho tiempo tratando de
encontrar la manera de seleccionar cierto

426
00:20:40,540 --> 00:20:43,660
elementos y la forma de hacer otras cosas.

427
00:20:43,660 --> 00:20:47,950
Y la otra gran cosa acerca de jQuery
es que es transversal navegador compatible.

428
00:20:47,950 --> 00:20:51,550
>> Así que recuerde de nuevo cuando nos dijo que
no todos los navegadores implementan

429
00:20:51,550 --> 00:20:53,100
cosas de la misma manera?

430
00:20:53,100 --> 00:20:55,120
Esto es cierto incluso en JavaScript.

431
00:20:55,120 --> 00:20:58,220
Y una de las mejores cosas de jQuery
es que va a detectar el

432
00:20:58,220 --> 00:21:00,300
y detectar el navegador
método apropiado.

433
00:21:00,300 --> 00:21:03,420
>> Así que si usted necesita para seleccionar un elemento,
Internet Explorer podría decir que eres

434
00:21:03,420 --> 00:21:05,770
supone que debe hacer de esta manera.

435
00:21:05,770 --> 00:21:08,300
Firefox podría decir lo correcto
forma es de esta manera.

436
00:21:08,300 --> 00:21:09,710
jQuery no le importa.

437
00:21:09,710 --> 00:21:12,550
Cuando le dices a jQuery para seleccionar un
elemento que se darán cuenta de cómo es

438
00:21:12,550 --> 00:21:16,290
supone que hacerlo dentro del navegador del
usuario está actualmente en, y luego hacer

439
00:21:16,290 --> 00:21:18,584
de esa manera.

440
00:21:18,584 --> 00:21:22,650
>> MIKE RIZZO: Así que no vamos a hablar acerca de
el uso de jQuery un poco.

441
00:21:22,650 --> 00:21:27,670
Al igual que PHP, jQuery tiene una especial
afición por el signo de dólar.

442
00:21:27,670 --> 00:21:30,880
Así que usted encontrará que cualquier jQuery -

443
00:21:30,880 --> 00:21:32,060
Bueno, no todos.

444
00:21:32,060 --> 00:21:35,210
A veces se puede reemplazar al dólar
firmar con la palabra jQuery.

445
00:21:35,210 --> 00:21:38,980
Pero, en general, sólo porque es
más corta, cada vez que vea siendo jQuery

446
00:21:38,980 --> 00:21:41,420
utilizado será con un signo de dólar.

447
00:21:41,420 --> 00:21:47,030
>> Así que aquí sólo estamos mostrando un comienzo
selector para un elemento en el DOM.

448
00:21:47,030 --> 00:21:52,850
Aquí, tenemos el signo de dólar seguido
por paréntesis de apertura y luego cita.

449
00:21:52,850 --> 00:21:56,130
Y dentro de las comillas ir nuestros selectores
para los diferentes elementos.

450
00:21:56,130 --> 00:21:59,810
Al igual que en el CSS, necesitábamos selectores para
ser capaz de aplicar estilo diferentes elementos

451
00:21:59,810 --> 00:22:00,840
dentro de la página.

452
00:22:00,840 --> 00:22:06,555
Esos diferentes selectores traducen
exactamente en jQuery y JavaScript,

453
00:22:06,555 --> 00:22:07,820
en su mayor parte.

454
00:22:07,820 --> 00:22:10,120
>> Así que aquí tenemos un foo punto.

455
00:22:10,120 --> 00:22:14,780
Así que si usted recuerda de conferencia,
el punto sólo significa la clase.

456
00:22:14,780 --> 00:22:18,850
Así que estamos seleccionando elemento
con la clase foo.

457
00:22:18,850 --> 00:22:22,670
Así que si sigo adelante y abrir nuestros
JavaScript consola de aquí muy rápido

458
00:22:22,670 --> 00:22:26,830
simplemente demostrar que, si yo sólo escribo la
signo de dólar, vemos que se trata de alguna

459
00:22:26,830 --> 00:22:28,090
función que aparece.

460
00:22:28,090 --> 00:22:29,420
Y se acaba de definir por jQuery.

461
00:22:29,420 --> 00:22:32,120
>> TOMAS REIMERS: Para aquellos de ustedes
desconocido, la consola es una herramienta

462
00:22:32,120 --> 00:22:35,430
dentro de Chrome, que le permite,
básicamente, ejecute JavaScript en la

463
00:22:35,430 --> 00:22:36,450
página actual.

464
00:22:36,450 --> 00:22:39,420
Esto se puede encontrar muy útil cuando
en realidad estás depuración y

465
00:22:39,420 --> 00:22:42,400
tiene que ser, qué es la corriente
valor de una variable global o lo

466
00:22:42,400 --> 00:22:43,910
es algo más?

467
00:22:43,910 --> 00:22:47,620
Es algo así como GDB, con la excepción
que en realidad se puede

468
00:22:47,620 --> 00:22:51,600
manipular los elementos de la página con
que de una manera mucho más fácil.

469
00:22:51,600 --> 00:22:55,080
Y también no lo hace, básicamente, compruebe
con usted antes de hacer nada.

470
00:22:55,080 --> 00:22:58,660
>> Así que, no GDB podría ser, ¿verdad
Seguro de que desea ejecutar el siguiente paso?

471
00:22:58,660 --> 00:22:59,830
La consola está en real.

472
00:22:59,830 --> 00:23:03,690
Así que la página web es la prestación y
haciendo lo que está haciendo, la

473
00:23:03,690 --> 00:23:05,720
consejo del también corriendo al lado de él.

474
00:23:05,720 --> 00:23:08,330
Y usted puede poner código de imputar a
esa consola, que se

475
00:23:08,330 --> 00:23:09,260
ejecutarse en la página.

476
00:23:09,260 --> 00:23:12,190
>> MIKE RIZZO: Así que para entrar en la consola,
Supongo que debería brevemente

477
00:23:12,190 --> 00:23:13,750
mencionar cómo hacerlo.

478
00:23:13,750 --> 00:23:17,850
En los últimos problemas que usted pueda tener
usado Chrome de inspeccionar elemento

479
00:23:17,850 --> 00:23:20,440
funciones o visualización de la página de origen -

480
00:23:20,440 --> 00:23:23,870
y esos son accesible sólo por derecho
clic en la página o una específica

481
00:23:23,870 --> 00:23:28,430
elemento y haciendo bien inspeccionar
elemento o vista de la página de origen.

482
00:23:28,430 --> 00:23:31,190
También podemos acceder a JavaScript
consola directamente por

483
00:23:31,190 --> 00:23:33,630
elegir inspeccionar elemento.

484
00:23:33,630 --> 00:23:37,930
Consola Así que usted acaba de golpear
en el extremo derecho.

485
00:23:37,930 --> 00:23:41,900
>> Como alternativa, puede también haber ido
a la esquina superior derecha,

486
00:23:41,900 --> 00:23:46,820
que se corta en esta pantalla donde
cuenta con las tres barras horizontales.

487
00:23:46,820 --> 00:23:52,010
Y hay que bajar a las herramientas y
a continuación, la consola JavaScript

488
00:23:52,010 --> 00:23:53,240
aquí, donde puede ver -

489
00:23:53,240 --> 00:23:54,370
al menos en Windows -

490
00:23:54,370 --> 00:23:59,680
el acceso directo es el Control Shift J. Entonces
si queríamos para seleccionar un elemento

491
00:23:59,680 --> 00:24:06,060
en esta página, al igual que yo mostré
antes, hacemos la muestra de dólar parens abiertas

492
00:24:06,060 --> 00:24:08,180
y luego cita.

493
00:24:08,180 --> 00:24:11,750
>> Una cosa interesante es, por lo general,
Las comillas simples y dobles

494
00:24:11,750 --> 00:24:12,370
intercambiable.

495
00:24:12,370 --> 00:24:16,050
Así que mucha gente sólo tiene que utilizar un solo
comillas porque son más rápidos de escribir

496
00:24:16,050 --> 00:24:19,780
de comillas porque no es así
tiene que mantener pulsada la tecla Mayús.

497
00:24:19,780 --> 00:24:21,770
Así que voy a hacer eso ahora mismo.

498
00:24:21,770 --> 00:24:24,510
>> Así que quiero seleccionar algo
con clase.

499
00:24:24,510 --> 00:24:27,200
Container, sólo porque sé que es
algo que está en nuestra

500
00:24:27,200 --> 00:24:28,740
la página web en este momento.

501
00:24:28,740 --> 00:24:29,520
Y llegué a Enter.

502
00:24:29,520 --> 00:24:31,670
Y podemos ver que la seleccionó.

503
00:24:31,670 --> 00:24:34,990
Por lo tanto, se muestra que
devuelto ese objeto.

504
00:24:34,990 --> 00:24:36,620
Así que esa es una selección básica.

505
00:24:36,620 --> 00:24:40,080
Si queremos manipular en realidad,
usted tendría que llamar a algo

506
00:24:40,080 --> 00:24:43,925
en que la selección, la cual
vamos a entrar en más adelante.

507
00:24:43,925 --> 00:24:49,030
>> TOMAS REIMERS: Así que sólo por ver que
más en profundidad, esto no es diferente

508
00:24:49,030 --> 00:24:52,245
que las llamadas a funciones que hicimos en C.
El nombre de la función aquí es un

509
00:24:52,245 --> 00:24:52,580
poco raro.

510
00:24:52,580 --> 00:24:55,640
Es signo de dólar.

511
00:24:55,640 --> 00:24:57,010
Es sólo un nombre de una función.

512
00:24:57,010 --> 00:24:58,810
No hay nada especial en ello.

513
00:24:58,810 --> 00:25:00,450
>> Tenemos paréntesis abiertos.

514
00:25:00,450 --> 00:25:03,880
Entonces, tenemos nuestro un argumento, que
en este caso pasa a ser una cadena,

515
00:25:03,880 --> 00:25:05,680
que es un selector para ello.

516
00:25:05,680 --> 00:25:08,130
Y luego, tenemos nuestra
paréntesis cerrado.

517
00:25:08,130 --> 00:25:09,960
Eso es todo.

518
00:25:09,960 --> 00:25:11,500
>> No es que muy diferentes.

519
00:25:11,500 --> 00:25:12,900
Aunque, que tiene un aspecto muy extraño.

520
00:25:12,900 --> 00:25:17,220
Y eso puede ser, más o menos, un escollo
apuntar para un montón de gente.

521
00:25:17,220 --> 00:25:21,460
>> MIKE RIZZO: Así que de manera similar, si queríamos
para seleccionar un elemento que tiene un ID,

522
00:25:21,460 --> 00:25:23,470
Ahora queremos seleccionar por
Identificación lugar de clase.

523
00:25:23,470 --> 00:25:28,080
Sería una cosa similar en el que
acaba de hacer el signo de sostenido por ID.

524
00:25:28,080 --> 00:25:33,576
Así que estamos seleccionando aquí todo
elementos que tienen bar ID.

525
00:25:33,576 --> 00:25:35,400
>> TOMAS REIMERS: Y esto se extiende.

526
00:25:35,400 --> 00:25:36,450
Eso CSS extiende.

527
00:25:36,450 --> 00:25:42,260
Al igual que en el CSS, se puede seleccionar todo
enlaces, que tienen la clase foo.

528
00:25:42,260 --> 00:25:43,420
Aquí, es la misma cosa.

529
00:25:43,420 --> 00:25:52,750
>> Usted podría hacer a.foo, que seleccionaría
todos los vínculos con la clase Foo.

530
00:25:52,750 --> 00:25:58,860
Usted podría hacer una barra afilada, lo que haría
seleccione el enlace con la barra de identificación y así

531
00:25:58,860 --> 00:25:59,770
sucesivamente y así sucesivamente.

532
00:25:59,770 --> 00:26:02,120
Cualquier selector CSS es una válida
selector de jQuery.

533
00:26:02,120 --> 00:26:03,370
>> MIKE RIZZO: Si.

534
00:26:03,370 --> 00:26:07,996

535
00:26:07,996 --> 00:26:11,460
OK, así que ahora vamos a entrar en un poco
de manipulación que podemos hacer con

536
00:26:11,460 --> 00:26:12,870
nuestra jQuery.

537
00:26:12,870 --> 00:26:19,280
Así que jQuery tiene un tipo particular
de notación en el que sólo utilizamos

538
00:26:19,280 --> 00:26:20,170
un punto al final.

539
00:26:20,170 --> 00:26:23,340
Y usted puede pensar en esto como en
C cómo teníamos diferentes estructuras.

540
00:26:23,340 --> 00:26:27,110
Y para entrar en esas estructuras, lo haría
utilizar un punto para entrar en ellos.

541
00:26:27,110 --> 00:26:28,480
>> Esto es, algo así, una cosa similar.

542
00:26:28,480 --> 00:26:33,570
Sólo que ahora tenemos funciones dentro de este
selector que podemos recurrir a ella.

543
00:26:33,570 --> 00:26:38,640
Así que aquí, el primer ejemplo
se puede ver es un selector CSS.

544
00:26:38,640 --> 00:26:45,290
Y, básicamente, lo que hace es
se aplica el primer elemento CSS para este

545
00:26:45,290 --> 00:26:46,230
cosa que ha seleccionado -

546
00:26:46,230 --> 00:26:47,720
este elemento que ha seleccionado -

547
00:26:47,720 --> 00:26:49,290
con el valor que.

548
00:26:49,290 --> 00:26:55,390
>> TOMAS REIMERS: Así que una traducción fácil de
eso sería si jQuery, básicamente,

549
00:26:55,390 --> 00:26:57,790
acaba de tomar foo.

550
00:26:57,790 --> 00:27:05,480
Y luego, en CSS, dijo,
el rojo y cerrar.

551
00:27:05,480 --> 00:27:06,670
Es la misma idea.

552
00:27:06,670 --> 00:27:08,800
Lo que se hace es que está seleccionado
todos los elementos Foo.

553
00:27:08,800 --> 00:27:10,170
Y entonces se aplica.

554
00:27:10,170 --> 00:27:15,884
Más o menos, el color de propiedad
es igual a rojo.

555
00:27:15,884 --> 00:27:21,070
>> MIKE RIZZO: Del mismo modo, también podemos alterar
el contenido real de lo que es

556
00:27:21,070 --> 00:27:24,870
que muestra en el código HTML de la página, que
es realmente genial, porque significa que su

557
00:27:24,870 --> 00:27:28,095
páginas web ahora pueden ser completamente dinámico
y no tienen que ser estática

558
00:27:28,095 --> 00:27:31,660
que imprima usando PHP
en el comienzo de

559
00:27:31,660 --> 00:27:33,320
La página se está cargando.

560
00:27:33,320 --> 00:27:36,810
Así que aquí, si quisiéramos cambiar la
HTML real de la página, lo haríamos hoy

561
00:27:36,810 --> 00:27:43,550
llamar a la función HTML, el cual sólo
insertos lo que especificamos en

562
00:27:43,550 --> 00:27:45,390
ese elemento que hemos seleccionado.

563
00:27:45,390 --> 00:27:49,810
Así que aquí estamos seleccionando elemento con
foo clase y luego diciendo que es HTML

564
00:27:49,810 --> 00:27:52,200
ahora es hola mundo.

565
00:27:52,200 --> 00:27:55,600
>> TOMAS REIMERS: Y cuando se piensa en
¿cuáles son las aplicaciones útiles de

566
00:27:55,600 --> 00:28:00,800
esto, esto CSS uno, lo primero que
usted puede comenzar a pensar es

567
00:28:00,800 --> 00:28:03,070
incluso en términos de menús desplegables.

568
00:28:03,070 --> 00:28:08,350
Usted podría comenzar a hacer cosas como, cuando
un usuario se desplaza sobre la parte superior

569
00:28:08,350 --> 00:28:11,970
of a down drop, quieres hacer
la parte inferior visible.

570
00:28:11,970 --> 00:28:12,540
¿Cierto?

571
00:28:12,540 --> 00:28:15,610
>> Así que en CSS, tenemos propiedades
para hacer algo visible.

572
00:28:15,610 --> 00:28:19,330
Cosas como la pantalla de colon ninguno
haría invisible.

573
00:28:19,330 --> 00:28:21,190
Bloque de visualización haría visible.

574
00:28:21,190 --> 00:28:25,860
O incluso si quieres ir más simple, que
tener cosas como iguales visibilidad

575
00:28:25,860 --> 00:28:27,520
visible y la visibilidad es igual oculto.

576
00:28:27,520 --> 00:28:30,330

577
00:28:30,330 --> 00:28:34,780
>> Y se podría empezar a aplicar las cosas
como desplegable derecha menús

578
00:28:34,780 --> 00:28:38,410
después de pasar por la idea de cómo
puede usted imaginar cuando este se abre,

579
00:28:38,410 --> 00:28:39,850
que vamos a salir de manera muy breve.

580
00:28:39,850 --> 00:28:42,160
Pero podemos comenzar a ver
aplicaciones de este.

581
00:28:42,160 --> 00:28:45,540
En un sentido similar, si usted fuera a tratar
y poner en práctica, digamos, una charla

582
00:28:45,540 --> 00:28:48,620
motor y quiere hacer un poco de
burbuja de diálogo siempre que Ud. has

583
00:28:48,620 --> 00:28:52,880
tiene un nuevo mensaje, una vez que el
nuevo mensaje, usted puede hacer un poco de

584
00:28:52,880 --> 00:28:55,890
burbuja de diálogo aparecerá de manera alterar
el código HTML de la página, a la derecha?

585
00:28:55,890 --> 00:29:00,540
Añadiendo que la burbuja del discurso adicional
con el texto adicional en ese país.

586
00:29:00,540 --> 00:29:01,140
¿Sí?

587
00:29:01,140 --> 00:29:07,750
>> AUDIENCIA: ¿Así que usted integrar esto dentro
el código HTML, en algo así como un

588
00:29:07,750 --> 00:29:10,534
[Inaudible]?

589
00:29:10,534 --> 00:29:12,940
>> MIKE RIZZO: Así es.

590
00:29:12,940 --> 00:29:16,190
Sí, vamos a llegar a eso
dentro de un rato.

591
00:29:16,190 --> 00:29:18,810
Sí, es un parecido
poco a PHP.

592
00:29:18,810 --> 00:29:21,240
No es exactamente similar.

593
00:29:21,240 --> 00:29:24,730
>> Una buena distinción de hacer es lo que este
en realidad está editando cuando editamos

594
00:29:24,730 --> 00:29:28,480
la página, ya que no va a ser
editando el archivo real que se

595
00:29:28,480 --> 00:29:31,380
guardado en el servidor porque el mundo
no deberían tener permiso

596
00:29:31,380 --> 00:29:32,610
para editar sus archivos.

597
00:29:32,610 --> 00:29:36,080
Esto es sólo editando lo que está en la página
y lo que se muestra en

598
00:29:36,080 --> 00:29:36,950
el navegador.

599
00:29:36,950 --> 00:29:40,340
Así que si usted fuera a volver a cargar la página después,
decir, la eliminación de algo como lo

600
00:29:40,340 --> 00:29:44,730
vemos que podemos hacer con la llamada remove,
eso sería volver a aparecer.

601
00:29:44,730 --> 00:29:48,590
>> TOMAS REIMERS: Así que una manera de pensar en
esto es si yo soy tu computadora y

602
00:29:48,590 --> 00:29:50,170
Mike es, más o menos, el servidor.

603
00:29:50,170 --> 00:29:53,850
¿Qué va a pasar es que voy a
Pregunta a Mike, oye, ¿puedo tener una copia de

604
00:29:53,850 --> 00:29:54,630
esta página web?

605
00:29:54,630 --> 00:29:56,190
Y él me dará una copia del mismo.

606
00:29:56,190 --> 00:29:57,430
>> No, no es lo original.

607
00:29:57,430 --> 00:29:58,620
Es sólo una copia.

608
00:29:58,620 --> 00:30:00,450
Y entonces sería como, oh,
hay código JavaScript escrito aquí.

609
00:30:00,450 --> 00:30:02,450
Claramente, debería editar el
página sea así.

610
00:30:02,450 --> 00:30:04,250
Y estoy editando su copia.

611
00:30:04,250 --> 00:30:05,920
>> Pero eso no efectuar
la copia real.

612
00:30:05,920 --> 00:30:08,480
Y si yo fuera a preguntarle de nuevo
actualizar la página, -

613
00:30:08,480 --> 00:30:10,060
Hey, ¿puedo tener otra copia limpia -

614
00:30:10,060 --> 00:30:11,440
él va a darme
otra copia limpia.

615
00:30:11,440 --> 00:30:14,240
Y entonces, yo voy a hacer lo mismo
como, oh, esto JS aquí que dice

616
00:30:14,240 --> 00:30:14,866
editar este.

617
00:30:14,866 --> 00:30:17,460
Y yo voy a seguir haciendo eso.

618
00:30:17,460 --> 00:30:20,930
>> MIKE RIZZO: Así que una cosa realmente fresca
que se puede hacer con jQuery es

619
00:30:20,930 --> 00:30:24,350
realmente agregar diferentes tipos
de animaciones a la página.

620
00:30:24,350 --> 00:30:27,440
No sé si alguna vez has visto donde
usted está tratando de un relleno de un formulario

621
00:30:27,440 --> 00:30:31,250
en línea y usted no llena
las cosas correctamente.

622
00:30:31,250 --> 00:30:33,440
Así que una pequeña cosa se desliza hacia abajo
en la parte superior y le dice

623
00:30:33,440 --> 00:30:34,820
no lo hayan hecho esto correctamente.

624
00:30:34,820 --> 00:30:36,260
Por favor, inténtelo de nuevo.

625
00:30:36,260 --> 00:30:37,890
Y entonces, tal vez incluso sólo deslizar hacia arriba.

626
00:30:37,890 --> 00:30:40,710
>> Resulta que jQuery se ha construido en funciones
que hacen todo eso

627
00:30:40,710 --> 00:30:44,180
animación muy, muy fácil.

628
00:30:44,180 --> 00:30:46,750
Así que no es en primer lugar el desvanecimiento
función, lo cual

629
00:30:46,750 --> 00:30:47,710
usted puede llamar en algo.

630
00:30:47,710 --> 00:30:55,650
Y es una manera de cambiar el CSS de
ese elemento en forma animada.

631
00:30:55,650 --> 00:30:58,480
Así que toma lo que sea elemento
usted lo llama fade out sucesivamente.

632
00:30:58,480 --> 00:31:03,990
Y luego, cambia lentamente de la opacidad
hasta que se apague completamente transparente.

633
00:31:03,990 --> 00:31:07,330
>> TOMAS REIMERS: La otra populares
se deslice hacia abajo, lo que hará

634
00:31:07,330 --> 00:31:08,800
algo parece deslizándolo hacia abajo.

635
00:31:08,800 --> 00:31:12,840
Así que en el caso del menú desplegable,
de nuevo, cuando nos enteramos de la forma de detectar

636
00:31:12,840 --> 00:31:15,310
cuando este se ha mantenido por encima,
usted podría decirle a este fondo

637
00:31:15,310 --> 00:31:16,910
parte deslice hacia abajo ahora.

638
00:31:16,910 --> 00:31:19,270
Y entonces, parece
deslizando hacia abajo.

639
00:31:19,270 --> 00:31:22,042

640
00:31:22,042 --> 00:31:26,590
>> MIKE RIZZO: Y entonces, si sólo tienes
algún tipo de animación en cuenta que

641
00:31:26,590 --> 00:31:29,080
jQuery no necesariamente proporcionan.

642
00:31:29,080 --> 00:31:32,690
Por ejemplo, digamos que jQuery
máquina le ofrece un tobogán

643
00:31:32,690 --> 00:31:33,750
hacia abajo y deslice hacia arriba.

644
00:31:33,750 --> 00:31:36,740
Bueno, vamos a decir que quería deslizar
algo por la izquierda o desde

645
00:31:36,740 --> 00:31:39,880
el tipo correcto de como el CS50
página principal hace cada vez

646
00:31:39,880 --> 00:31:42,080
usted va a un nuevo panel.

647
00:31:42,080 --> 00:31:45,030
A continuación, probablemente tendrá que
aplicar por sí mismo utilizando la

648
00:31:45,030 --> 00:31:49,310
animar función dentro de jQuery.

649
00:31:49,310 --> 00:31:51,350
>> Así que de manera similar, que acaba de animar.

650
00:31:51,350 --> 00:31:55,850
Y luego, dentro de ella que se necesita un
Diccionario de los diferentes valores

651
00:31:55,850 --> 00:31:57,340
que se supone que debes pasar.

652
00:31:57,340 --> 00:32:06,960
Así que aquí, si quisiéramos animar la
elemento foo de tal manera que su anchura sea

653
00:32:06,960 --> 00:32:10,880
se expande o contrae a 80 píxeles;
dependiendo de lo que actualmente es.

654
00:32:10,880 --> 00:32:14,100
Nos acaba de pasar que, como
el argumento en su interior.

655
00:32:14,100 --> 00:32:18,060
>> Animar también tienen algunos otros argumentos
que usted podría pasar, por ejemplo,

656
00:32:18,060 --> 00:32:21,150
la velocidad de la animación
que quieres darle.

657
00:32:21,150 --> 00:32:26,220
Y para hacer eso, yo sólo diría
rápidamente Google jQuery animado.

658
00:32:26,220 --> 00:32:31,710
Y luego, la crianza de esta página, usted puede
ver que tiene un montón de diferentes

659
00:32:31,710 --> 00:32:33,560
propiedades que puede aprobarlo.

660
00:32:33,560 --> 00:32:35,990
>> Y os animo - cada vez que vienen
con algo que no lo hace

661
00:32:35,990 --> 00:32:40,390
saber o simplemente quiere aprender más sobre una
método particular que puede llamar

662
00:32:40,390 --> 00:32:41,270
en algo -

663
00:32:41,270 --> 00:32:44,440
Sólo Google. jQuery es extremadamente
bien documentado.

664
00:32:44,440 --> 00:32:49,140
Y muchas veces hay una gran cantidad de
ejemplos que se proporcionan para usted.

665
00:32:49,140 --> 00:32:52,470
Si nos desplazamos hacia abajo -

666
00:32:52,470 --> 00:32:53,720
hasta abajo -

667
00:32:53,720 --> 00:32:57,660

668
00:32:57,660 --> 00:32:59,190
que podemos utilizar, también.

669
00:32:59,190 --> 00:33:02,480
>> Una vez más, cuando un desarrollador se va en realidad
por la molestia de escribir un

670
00:33:02,480 --> 00:33:05,810
biblioteca, por lo general quieren
alguien a usarlo.

671
00:33:05,810 --> 00:33:09,400
Por ello, junto va a
ser una documentación.

672
00:33:09,400 --> 00:33:12,270
Y que la documentación que generalmente puede ser
que se encuentra en la página del proyecto, que es

673
00:33:12,270 --> 00:33:14,970
por eso le dimos ese sitio original en
el principio, lo que se vincula a la

674
00:33:14,970 --> 00:33:18,080
páginas del proyecto para que pueda
ver que la documentación.

675
00:33:18,080 --> 00:33:22,670
>> Normalmente, la página del proyecto en el caso
de [inaudible], le dijo a la

676
00:33:22,670 --> 00:33:23,940
nombres de las clases.

677
00:33:23,940 --> 00:33:27,250
En el caso de JavaScript, que da
que el nombre de las funciones.

678
00:33:27,250 --> 00:33:35,310
Por cierto, si nos desplazamos hasta la cima,
una nota lateral rápida en las funciones es

679
00:33:35,310 --> 00:33:39,080
cada vez que vea una función implementada
así con el disco

680
00:33:39,080 --> 00:33:43,800
paréntesis en el medio, lo que significa
que esa propiedad es opcional.

681
00:33:43,800 --> 00:33:44,750
Sólo un mano a mano.

682
00:33:44,750 --> 00:33:47,350
He visto un montón de preguntas
sobre eso.

683
00:33:47,350 --> 00:33:50,370
>> Así que aquí podemos ver que la
animate tiene propiedades

684
00:33:50,370 --> 00:33:51,800
como un argumento necesario.

685
00:33:51,800 --> 00:33:54,870
Y todo lo demás es opcional.

686
00:33:54,870 --> 00:33:56,136
Nota al margen -

687
00:33:56,136 --> 00:33:58,090
usted puede pensar en esto, más o menos
de, al igual que las páginas de manual.

688
00:33:58,090 --> 00:34:04,275
Las páginas man son de documentación para C y
para un montón de otras cosas, también.

689
00:34:04,275 --> 00:34:11,020
>> MIKE RIZZO: Así que hemos aprendido a
cambiar diverso CSS en la página,

690
00:34:11,020 --> 00:34:14,040
animarlo, y retire agregar HTML.

691
00:34:14,040 --> 00:34:16,889
Pero uno de los realmente más poderosa
cosas acerca de JavaScript

692
00:34:16,889 --> 00:34:18,270
y especialmente jQuery -

693
00:34:18,270 --> 00:34:22,570
lo que le permite hacer es responder a
diferentes elementos que suceden.

694
00:34:22,570 --> 00:34:25,380
Por ejemplo, aquí tenemos
un controlador de eventos.

695
00:34:25,380 --> 00:34:28,210
Y eso sólo significa que cada vez que esto
evento ocurre, lo manejamos en un

696
00:34:28,210 --> 00:34:29,280
de cierta manera.

697
00:34:29,280 --> 00:34:35,159
>> Así que aquí, el evento genérico jQuery
handler es el punto en.

698
00:34:35,159 --> 00:34:42,949
Y entonces, lo primero que siempre
es qué evento debería

699
00:34:42,949 --> 00:34:43,810
estar escuchando a.

700
00:34:43,810 --> 00:34:45,610
Así que aquí, es el clic que
que estamos esperando.

701
00:34:45,610 --> 00:34:49,250
>> TOMAS REIMERS: Alternativamente, usted tiene
en vuelo estacionario, el cual es muy popular.

702
00:34:49,250 --> 00:34:52,000
Así que de vuelta a mi desplegables idea menú.

703
00:34:52,000 --> 00:34:54,239
Usted tendría el de arriba en vuelo estacionario.

704
00:34:54,239 --> 00:34:56,096
Y entonces usted podría cambiar eso.

705
00:34:56,096 --> 00:34:56,830
>> MIKE RIZZO: Así es.

706
00:34:56,830 --> 00:35:01,680
Y entonces, cuando eso sucede, sólo
ejecuta esta función que le damos

707
00:35:01,680 --> 00:35:05,080
como argumento y que
alerta a hola o hola.

708
00:35:05,080 --> 00:35:08,900
>> TOMAS REIMERS: Así que en el caso de
JavaScript, este es un lugar que tenemos que

709
00:35:08,900 --> 00:35:12,970
desligarnos de C. Podemos realmente
tomar funciones como argumentos.

710
00:35:12,970 --> 00:35:15,940
Y hay un montón de muy
complejas formas de hacer esto.

711
00:35:15,940 --> 00:35:17,940
Vamos a promover de una manera,
que es se puede definir el

712
00:35:17,940 --> 00:35:19,270
funcionar allí.

713
00:35:19,270 --> 00:35:22,540
>> Así que cuando usted está pidiendo una función como
un parámetro, eres básicamente

714
00:35:22,540 --> 00:35:24,500
va a definir la función
en el acto.

715
00:35:24,500 --> 00:35:27,090
Y la manera de definir una función
en JavaScript que es

716
00:35:27,090 --> 00:35:28,820
literalmente decir función.

717
00:35:28,820 --> 00:35:30,130
Entonces, por lo general, el nombre
de la función.

718
00:35:30,130 --> 00:35:32,510
Pero nunca vamos a hacer referencia a
esta función de nuevo.

719
00:35:32,510 --> 00:35:34,040
Así que lo dejamos sin nombre.

720
00:35:34,040 --> 00:35:40,440
>> A continuación, los paréntesis, a continuación, el rizado
llaves, y luego el código dentro de esa.

721
00:35:40,440 --> 00:35:42,540
Así entendemos esta lata
ser un poco confuso.

722
00:35:42,540 --> 00:35:45,180
Así que le damos la forma general de
lo que es un controlador de eventos parece

723
00:35:45,180 --> 00:35:47,790
a continuación, que se encuentra en los acontecimientos.

724
00:35:47,790 --> 00:35:50,598
Y entonces, el código dentro de eso.

725
00:35:50,598 --> 00:35:52,478
>> MIKE RIZZO: ¿Hay alguna
preguntas acerca de esto?

726
00:35:52,478 --> 00:35:54,818
Esto puede ser un poco confuso
la primera vez que lo veo.

727
00:35:54,818 --> 00:35:57,550
>> TOMAS REIMERS: Usted realmente quiere
abrir un archivo y mostrarles algunos

728
00:35:57,550 --> 00:35:58,155
jQuery en este momento?

729
00:35:58,155 --> 00:35:59,853
>> MIKE RIZZO: Sí, vamos a hacer eso.

730
00:35:59,853 --> 00:36:00,256
Aceptar.

731
00:36:00,256 --> 00:36:02,490
>> TOMAS REIMERS: Así que ahora estamos
en el aparato.

732
00:36:02,490 --> 00:36:07,730
Y lo que hemos hecho es que hemos tomado la
la libertad de crear a la vez un index.HTML

733
00:36:07,730 --> 00:36:10,100
archivo, que enlaza con
un archivo JavaScript.

734
00:36:10,100 --> 00:36:12,880
¿Y podemos abrir el -

735
00:36:12,880 --> 00:36:15,170
sí.

736
00:36:15,170 --> 00:36:16,630
Bueno, hace dos cosas.

737
00:36:16,630 --> 00:36:18,350
>> La primera es que se vincula a
el archivo JavaScript.

738
00:36:18,350 --> 00:36:21,250
Y veremos que hasta aquí.

739
00:36:21,250 --> 00:36:25,340
Vemos que en la cabeza de la
Documento HTML, en particular.

740
00:36:25,340 --> 00:36:28,260
Entonces verás que hay que
que, básicamente, decimos SRC,

741
00:36:28,260 --> 00:36:29,590
que significa fuente.

742
00:36:29,590 --> 00:36:30,630
Y esa es la dirección URL.

743
00:36:30,630 --> 00:36:32,700
>> Así que aquí se puede decir que hemos
incluido jQuery.

744
00:36:32,700 --> 00:36:34,290
Y también hemos incluido scripts.

745
00:36:34,290 --> 00:36:40,630
La otra manera de incluir JavaScript está
que puede incluir una secuencia de comandos en línea

746
00:36:40,630 --> 00:36:44,600
tag que tenemos en la parte inferior donde se
dice tipo de guión es el texto de JavaScript.

747
00:36:44,600 --> 00:36:46,960
>> Así que estamos diciendo, escucha, estamos
a punto de incluir un script.

748
00:36:46,960 --> 00:36:51,890
Y el tipo de ese guión es
JavaScript, que es un tipo de texto.

749
00:36:51,890 --> 00:36:52,550
Muy simple.

750
00:36:52,550 --> 00:36:56,490
>> MIKE RIZZO: Así que esto, un poco, llega a
su pregunta acerca de cómo incluimos

751
00:36:56,490 --> 00:37:02,340
JavaScript en nuestros archivos, porque cuando nos
había PHP, vamos a hacer algo como esto.

752
00:37:02,340 --> 00:37:07,570
Y luego, tenemos nuestras funciones de PHP -
digamos que las poblaciones hacen

753
00:37:07,570 --> 00:37:09,150
algo con que -

754
00:37:09,150 --> 00:37:10,490
va allí.

755
00:37:10,490 --> 00:37:13,860
Sin embargo, ahora tenemos las etiquetas de script
que nosotros le damos, que en realidad son

756
00:37:13,860 --> 00:37:19,470
parte del propio HTML, porque no es
fingiendo ser un archivo HTML como si

757
00:37:19,470 --> 00:37:25,070
es en PHP, porque si intenta ir en
y mirar la fuente de la página,

758
00:37:25,070 --> 00:37:28,430
verás estas etiquetas script en allí
con el JavaScript asociado con

759
00:37:28,430 --> 00:37:29,800
en que.

760
00:37:29,800 --> 00:37:31,760
>> Así que, si queríamos
escribir algo de JavaScript -

761
00:37:31,760 --> 00:37:37,110
digamos que queríamos cambiar el cuerpo
porque en este momento no tengo

762
00:37:37,110 --> 00:37:40,020
cualesquiera otras etiquetas que realmente puedo
editar además de cuerpo.

763
00:37:40,020 --> 00:37:42,450
Digamos que quería
cambiar el CSS de eso.

764
00:37:42,450 --> 00:37:46,190
Así que vamos a seguir adelante y el cambio
el color de la misma a rojo.

765
00:37:46,190 --> 00:37:47,380
>> Así que guarde el archivo.

766
00:37:47,380 --> 00:37:52,700
Volvamos a nuestra página Web, actualizar,
y lo hace de forma automática

767
00:37:52,700 --> 00:37:55,920
ya que no parecía que esperaba
en absoluto, porque nosotros no estábamos escuchando

768
00:37:55,920 --> 00:37:59,450
para un evento o algo por el estilo.

769
00:37:59,450 --> 00:38:02,800
>> TOMAS REIMERS: Entonces, si nos remontamos a ese
presentar, en particular, - el código HTML

770
00:38:02,800 --> 00:38:04,710
Archivo - lo que vas
ver es que tenemos -

771
00:38:04,710 --> 00:38:06,810
recuerde que este se carga,
más o menos, cronológicamente.

772
00:38:06,810 --> 00:38:09,910
Así que tenemos por primera vez la cabeza.
que carga los dos archivos.

773
00:38:09,910 --> 00:38:10,800
Luego nos dirigimos al cuerpo.

774
00:38:10,800 --> 00:38:11,640
Y vemos hola mundo.

775
00:38:11,640 --> 00:38:13,030
Así que prestamos hola mundo.

776
00:38:13,030 --> 00:38:15,240
>> Y entonces lo último que tenemos
es que tenemos la etiqueta script.

777
00:38:15,240 --> 00:38:20,880
Así se ejecuta la etiqueta script porque es
si la oculta que esperar para nada.

778
00:38:20,880 --> 00:38:24,700
Y eso es lo más básico
forma de ejecutar JavaScript.

779
00:38:24,700 --> 00:38:29,200
>> Dicho esto, se puede poner el guión
etiqueta en la cabecera sólo

780
00:38:29,200 --> 00:38:31,240
para demostrar este punto?

781
00:38:31,240 --> 00:38:34,450

782
00:38:34,450 --> 00:38:35,700
Y corre eso.

783
00:38:35,700 --> 00:38:38,880

784
00:38:38,880 --> 00:38:41,070
Vamos a notar que
no cambió el color.

785
00:38:41,070 --> 00:38:44,210
Y este es uno de los problemas de
JavaScript es que las cosas se cargan

786
00:38:44,210 --> 00:38:45,930
en un orden cronológico.

787
00:38:45,930 --> 00:38:49,750
>> Así en el momento que ese código
estaba corriendo, seleccionamos -

788
00:38:49,750 --> 00:38:52,530
volver -

789
00:38:52,530 --> 00:38:53,670
la etiqueta body.

790
00:38:53,670 --> 00:38:57,560
El cuerpo de la etiqueta no existe todavía, porque
JavaScript es acorde con HTML.

791
00:38:57,560 --> 00:39:01,790
Así que el navegador es como selecto cuerpo.

792
00:39:01,790 --> 00:39:02,760
Hay sin embargo, no hay tal cosa.

793
00:39:02,760 --> 00:39:03,600
Así que podemos ignorar eso.

794
00:39:03,600 --> 00:39:05,330
Y seguimos adelante.

795
00:39:05,330 --> 00:39:07,200
>> Y a continuación, se define una etiqueta body.

796
00:39:07,200 --> 00:39:09,670
Pero eso nunca se actualiza.

797
00:39:09,670 --> 00:39:12,560
Así que cuando la aplicación de la escritura
etiquetas, asegúrese de colocar

798
00:39:12,560 --> 00:39:15,502
después de que el cuerpo de la etiqueta.

799
00:39:15,502 --> 00:39:16,820
Siguiente diapositiva.

800
00:39:16,820 --> 00:39:17,830
>> MIKE RIZZO: OK.

801
00:39:17,830 --> 00:39:19,330
Así que cambiamos algo.

802
00:39:19,330 --> 00:39:21,910
Pero no parece que respondió a
nosotros en absoluto, ya que sólo un poco de

803
00:39:21,910 --> 00:39:24,150
lo hizo tan pronto como se carga la página.

804
00:39:24,150 --> 00:39:27,700
Así que ahora, en vez de hacer esto, ¿por qué
No añadimos un controlador de eventos.

805
00:39:27,700 --> 00:39:31,020
>> Así que vamos a hacer algo
para el cuerpo de nuevo.

806
00:39:31,020 --> 00:39:33,490
Y digamos que lo hacemos en -

807
00:39:33,490 --> 00:39:34,500
haga clic en.

808
00:39:34,500 --> 00:39:35,750
Vamos a añadir una función.

809
00:39:35,750 --> 00:39:38,270

810
00:39:38,270 --> 00:39:39,690
>> Cambio Vamos: TOMAS REIMERS
su color a rojo otra vez.

811
00:39:39,690 --> 00:39:40,000
¿Por qué no?

812
00:39:40,000 --> 00:39:41,680
>> MIKE RIZZO: Sí, vamos a cambiar
su "color a rojo otra vez.

813
00:39:41,680 --> 00:39:46,310

814
00:39:46,310 --> 00:39:46,900
Está bien.

815
00:39:46,900 --> 00:39:48,480
Así que vamos a cargar la página.

816
00:39:48,480 --> 00:39:49,530
Bien, nos vemos -

817
00:39:49,530 --> 00:39:52,290
como se esperaba, no se enciende de color rojo todavía.

818
00:39:52,290 --> 00:39:53,610
Pero entonces podemos seguir adelante y haga clic en él.

819
00:39:53,610 --> 00:39:54,270
>> TOMAS REIMERS: Y no volverá de color rojo.

820
00:39:54,270 --> 00:39:56,090
>> MIKE RIZZO: Y lo hace
volverá de color rojo como se esperaba.

821
00:39:56,090 --> 00:39:59,010
>> TOMAS REIMERS: Y podemos ver cómo
podemos empezar a construir muy básico

822
00:39:59,010 --> 00:40:00,170
interacción.

823
00:40:00,170 --> 00:40:03,850
Otras cosas que puede querer hacer es,
si no queremos que el cuerpo

824
00:40:03,850 --> 00:40:07,230
el rojo, vamos a hacer el código HTML
fondo de color rojo.

825
00:40:07,230 --> 00:40:08,480
Justo lo que es el mismo CSS.

826
00:40:08,480 --> 00:40:19,960

827
00:40:19,960 --> 00:40:23,320
>> Y cuando lo cambiamos, podemos ver esta
efecto muy dramático de cambiar el

828
00:40:23,320 --> 00:40:25,510
página entera.

829
00:40:25,510 --> 00:40:29,100
Así que de nuevo, si usted está implementando cosas,
usted puede tener un componente

830
00:40:29,100 --> 00:40:30,150
que está destinado a ser hecho clic en.

831
00:40:30,150 --> 00:40:32,710
Digamos que un botón Salir y
todo un otro componente,

832
00:40:32,710 --> 00:40:33,830
que está destinado a responder.

833
00:40:33,830 --> 00:40:35,755
Por lo que le quite una ventana
cuando esto sucede.

834
00:40:35,755 --> 00:40:39,341

835
00:40:39,341 --> 00:40:40,700
>> MIKE RIZZO: OK.

836
00:40:40,700 --> 00:40:42,200
Sólo como un ejemplo -

837
00:40:42,200 --> 00:40:44,400
que no llega a ver esto antes -

838
00:40:44,400 --> 00:40:47,500
Sólo te voy a mostrar lo que parece
como cuando nos escondemos algo.

839
00:40:47,500 --> 00:40:52,220
Así que voy a seguir adelante y hacerlo deslizar hacia arriba.

840
00:40:52,220 --> 00:40:54,440
>> TOMAS REIMERS: ¿Quieres envolver que en un
texto de párrafo antes de hacer eso?

841
00:40:54,440 --> 00:40:55,132
>> MIKE RIZZO: OK.

842
00:40:55,132 --> 00:40:59,135
Sí, ¿por qué no lo hacemos sólo para
podemos seleccionar un poco más.

843
00:40:59,135 --> 00:41:00,490
>> TOMAS Reimers: Y vamos a
darle una clase.

844
00:41:00,490 --> 00:41:01,740
>> MIKE RIZZO: Si.

845
00:41:01,740 --> 00:41:06,575

846
00:41:06,575 --> 00:41:09,920
OK, así que vamos a ver.

847
00:41:09,920 --> 00:41:14,820
En lugar de seleccionar el cuerpo real
ahora, sólo voy a seleccionar todo con

848
00:41:14,820 --> 00:41:18,780
clase hola, que aquí estamos
sólo hay una cosa.

849
00:41:18,780 --> 00:41:20,900
Así que no deberíamos tener que
preocuparse por eso.

850
00:41:20,900 --> 00:41:23,080
>> Así que voy a actualizarlo.

851
00:41:23,080 --> 00:41:24,230
Voy a seguir adelante y haga clic en él.

852
00:41:24,230 --> 00:41:27,890
Y, más o menos, hizo una diapositiva raro
cosa, que no parecía que

853
00:41:27,890 --> 00:41:29,580
atractivo.

854
00:41:29,580 --> 00:41:31,060
En general, se ven bastante bien.

855
00:41:31,060 --> 00:41:32,720
Supongo, esto - por alguna
razón - no lo hizo.

856
00:41:32,720 --> 00:41:36,640
Voy a hacer un fundido de salida de modo
se puede ver en eso también.

857
00:41:36,640 --> 00:41:38,100
Mucho mejor.

858
00:41:38,100 --> 00:41:41,150
>> Y luego, si abro el JavaScript
consolamos de nuevo y queremos ver lo que

859
00:41:41,150 --> 00:41:43,900
parece que cuando nos caímos pulg

860
00:41:43,900 --> 00:41:46,920
Ahora, sólo llamo desvanecerse en el ajo.

861
00:41:46,920 --> 00:41:48,830
Y se desvanece interactivo

862
00:41:48,830 --> 00:41:56,150
>> Del mismo modo, en realidad podríamos pasar también
un argumento para atenuar o intensificar cabo,

863
00:41:56,150 --> 00:41:57,640
que es, una especie de, la velocidad de la misma.

864
00:41:57,640 --> 00:42:02,220
Así que vamos a seguir adelante y decir que queremos
que ir poco a poco se desvanecen pulg

865
00:42:02,220 --> 00:42:04,250
Así que supongo que todavía parecía
bastante rápido.

866
00:42:04,250 --> 00:42:06,180
Pero fue más lento que antes.

867
00:42:06,180 --> 00:42:10,340
>> TOMAS REIMERS: Y si usted quiere encontrar
Más información acerca de estas cosas, de nuevo,

868
00:42:10,340 --> 00:42:13,410
basta con ir a la documentación de jQuery,
que les hemos dado, y leemos

869
00:42:13,410 --> 00:42:13,735
a través de estos.

870
00:42:13,735 --> 00:42:15,790
Documentan sus funciones
increíblemente bien.

871
00:42:15,790 --> 00:42:18,622

872
00:42:18,622 --> 00:42:19,570
>> MIKE RIZZO: OK.

873
00:42:19,570 --> 00:42:21,560
Así que supongo que vamos a volver a esto.

874
00:42:21,560 --> 00:42:23,490
Y podemos hablar de nuestra página pasada.

875
00:42:23,490 --> 00:42:24,690
Bueno, podemos terminar con Bootstrap.

876
00:42:24,690 --> 00:42:27,140
Y luego vamos a abrir hasta
para algunas preguntas.

877
00:42:27,140 --> 00:42:30,180
Y si ustedes tienen alguna idea de que
desea tratar de tirar hacia arriba y ver

878
00:42:30,180 --> 00:42:34,150
si somos capaces de ponerlas en práctica con
JavaScript rápidamente.

879
00:42:34,150 --> 00:42:37,890
>> Así que en realidad rápidamente acerca de Manos a la Obra, que
fue incluido automáticamente en

880
00:42:37,890 --> 00:42:41,700
su último conjunto de problemas en la carpeta CSS
y de hecho vinculados en su

881
00:42:41,700 --> 00:42:43,190
header.php.

882
00:42:43,190 --> 00:42:46,740
Por lo que podría haber agregado clases que
se definen dentro de Manos a la Obra a la misma.

883
00:42:46,740 --> 00:42:50,490
Y habría labrado de forma automática
esas cosas en consecuencia.

884
00:42:50,490 --> 00:42:54,550
>> TOMAS REIMERS: Así Bootstrap es un muy
cosa mágica desarrollado por el pueblo

885
00:42:54,550 --> 00:42:55,340
en Twitter.

886
00:42:55,340 --> 00:42:57,230
Y lo que debía hacer era -

887
00:42:57,230 --> 00:43:00,740
antes de los sitios web eran realmente duro para hacer
vean bien, especialmente cuando tuvimos

888
00:43:00,740 --> 00:43:02,200
una gran cantidad de componentes comunes.

889
00:43:02,200 --> 00:43:04,770
Así que un montón de botones en el
web se veía igual.

890
00:43:04,770 --> 00:43:08,960
>> Una gran cantidad de campos de texto se puede hacer para
ven mejor que el texto estándar

891
00:43:08,960 --> 00:43:13,620
campo usted probablemente sabe de verdad
webs antiguas o muy mal hechos

892
00:43:13,620 --> 00:43:18,210
sitios web, que sólo se ven como literal
cuadros de texto sin ningún tipo de texto

893
00:43:18,210 --> 00:43:21,190
sombra o cualquier tipo de buen contorno.

894
00:43:21,190 --> 00:43:24,540
Así que lo que hizo fue Bootstrap dijo, bueno,
Tenemos muchos estilos comunes.

895
00:43:24,540 --> 00:43:28,210
¿Por qué no hacemos un conjunto común de CSS
y un conjunto común de JavaScript como

896
00:43:28,210 --> 00:43:32,210
así, lo que puede diseñarlo como está y que
puede dar a la gente cosas como caída

897
00:43:32,210 --> 00:43:34,610
menús desplegables, lo que puede dar a la gente
cosas como los modales.

898
00:43:34,610 --> 00:43:38,580
>> Modal es lo que aparece sobre la página
cada vez que sea estrictamente hablando

899
00:43:38,580 --> 00:43:41,090
algo, que inhibe aún más
interacción hasta que

900
00:43:41,090 --> 00:43:43,110
interactuar con él.

901
00:43:43,110 --> 00:43:45,820
Algo como esto es, ¿estás segura de
que desea eliminar esta cosa?

902
00:43:45,820 --> 00:43:49,100
Realmente no se puede hacer nada más
hasta que digas sí o no.

903
00:43:49,100 --> 00:43:52,720
>> Le tomó todo esto y empaquetarla que
juntos y dijo, aquí vamos.

904
00:43:52,720 --> 00:43:54,630
Ahora la gente puede usar esto.

905
00:43:54,630 --> 00:43:56,830
Y usted lo puede encontrar a través de
en getbootstrap.com.

906
00:43:56,830 --> 00:44:00,480
Se incluye automáticamente dentro
pon tu último problema.

907
00:44:00,480 --> 00:44:04,160
Y tú eres más que bienvenido a
usarlo en su proyecto final.

908
00:44:04,160 --> 00:44:06,950
Y si quieres seguir ese
enlace para obtener Bootstrap.

909
00:44:06,950 --> 00:44:10,590

910
00:44:10,590 --> 00:44:15,700
>> Usted verá aquí es la
Bootstrap sitio CSS.

911
00:44:15,700 --> 00:44:16,860
Verás Bootstrap.

912
00:44:16,860 --> 00:44:20,450
Y si se desplaza hacia abajo, verá
cómo descargar, cómo

913
00:44:20,450 --> 00:44:21,900
instalarlo, et cetera.

914
00:44:21,900 --> 00:44:24,700
>> MIKE RIZZO: Y usted también puede,
curiosamente, personalizarlo a

915
00:44:24,700 --> 00:44:27,770
ser cualquier tipo de temas
que desee.

916
00:44:27,770 --> 00:44:31,270
Sé que eso es algo que hice para mi
proyecto final cuando tomé la clase

917
00:44:31,270 --> 00:44:32,050
fue personalizarlo.

918
00:44:32,050 --> 00:44:34,540
Una versión diferente de Manos a la Obra que
tenía un esquema de color diferente y

919
00:44:34,540 --> 00:44:36,700
diferentes formas de algunos
cosas diferentes.

920
00:44:36,700 --> 00:44:38,250
Así que os animo a jugar con eso.

921
00:44:38,250 --> 00:44:39,440
Es un poco divertido que hacer.

922
00:44:39,440 --> 00:44:43,230
>> TOMAS REIMERS: Mirando a través de la parte superior
de nuevo, es muy similar a la Font

923
00:44:43,230 --> 00:44:44,970
Sitio impresionante.

924
00:44:44,970 --> 00:44:47,810
Una gran cantidad de documentación se iniciará
al parecer similar cuando has

925
00:44:47,810 --> 00:44:48,940
visto lo suficiente de él.

926
00:44:48,940 --> 00:44:51,260
Así que aquí tenemos la CSS
componente de este.

927
00:44:51,260 --> 00:44:53,540
Y verás cómo
puede labrar cosas.

928
00:44:53,540 --> 00:44:56,780
Así que si usted hace clic en tablas, por ejemplo,
inmediatamente puede hacer un

929
00:44:56,780 --> 00:45:01,710
mesa bastante simplemente añadiendo
la tabla de clases a la misma.

930
00:45:01,710 --> 00:45:03,150
>> Las mismas cosas para los botones.

931
00:45:03,150 --> 00:45:12,140
Si usted sólo tiene que añadir BTN clase y BTN
defecto o BTN primaria, puede

932
00:45:12,140 --> 00:45:16,240
conseguir cualquiera de estos botones
con estos estilos pre-hechos.

933
00:45:16,240 --> 00:45:18,570
Y entonces, si usted está buscando
algo más complejo que la simple

934
00:45:18,570 --> 00:45:24,100
restyling lo w ya tienen, a lo largo de
la ficha JavaScript a través de la que la parte superior

935
00:45:24,100 --> 00:45:25,120
tienen un montón de componentes.

936
00:45:25,120 --> 00:45:30,410
>> Así que aquí tenemos transiciones, modales,
menús desplegables, tabuladores y la información sobre herramientas.

937
00:45:30,410 --> 00:45:35,530
Una información sobre herramientas es lo que aparece debajo de su
ratón cuando pasa algo.

938
00:45:35,530 --> 00:45:40,280
Popovers, alertas, botones y plegable
acordeones es lo

939
00:45:40,280 --> 00:45:41,190
por lo general se llaman.

940
00:45:41,190 --> 00:45:43,045
Carruseles, que flip
a través de imágenes como.

941
00:45:43,045 --> 00:45:52,190

942
00:45:52,190 --> 00:45:54,840
>> Así que estos son los componentes
de Manos a la Obra.

943
00:45:54,840 --> 00:45:57,620
Te animaría a
altamente ir a buscar en ellos.

944
00:45:57,620 --> 00:46:01,780
Hay un componente JavaScript
y un componente de CSS.

945
00:46:01,780 --> 00:46:03,880
Siéntase libre de utilizar puesto que le servirán.

946
00:46:03,880 --> 00:46:06,730
No vamos a profundizar mucho en ellos
porque sentimos la documentación

947
00:46:06,730 --> 00:46:09,360
está muy bien hecho.

948
00:46:09,360 --> 00:46:10,540
Y sí.

949
00:46:10,540 --> 00:46:14,500
¿Tiene alguna pregunta acerca de eso?

950
00:46:14,500 --> 00:46:19,430
>> MIKE RIZZO: Así como son realmente rápida
lado, el diseño de esta página web que

951
00:46:19,430 --> 00:46:21,830
rápidamente armamos para
esta presentación es

952
00:46:21,830 --> 00:46:24,290
realmente se hace usando Bootstrap.

953
00:46:24,290 --> 00:46:27,810
Como usted puede ver, cuando hacemos clic sobre estos
diferentes pestañas, nunca en realidad son

954
00:46:27,810 --> 00:46:30,750
salir de esta página index.html actual.

955
00:46:30,750 --> 00:46:36,400
Así que lo que tenemos es diferentes divs
dentro de esta index.html.

956
00:46:36,400 --> 00:46:39,610
Y luego, cada vez que haga clic en un diferente
pestaña, es sólo el cambio de

957
00:46:39,610 --> 00:46:41,590
que muestra de uno.

958
00:46:41,590 --> 00:46:47,390
>> Por lo tanto, en consecuencia los posiciona,
cambia el código HTML de la página para que

959
00:46:47,390 --> 00:46:52,330
la ficha actual está marcada como activa para
aparece de manera diferente y se ve

960
00:46:52,330 --> 00:46:52,820
realmente agradable.

961
00:46:52,820 --> 00:46:57,260
>> TOMAS REIMERS: Así que eso fue todo hecho
sin escribir casi cualquier CSS.

962
00:46:57,260 --> 00:47:01,440
También vemos un encabezado en la parte superior,
que los colores son por nosotros.

963
00:47:01,440 --> 00:47:04,800
Pero la verdadera puesta en el
parte superior de la página y hacer

964
00:47:04,800 --> 00:47:06,660
que rollo era Bootstrap.

965
00:47:06,660 --> 00:47:09,720
Y a continuación, incluso para otra biblioteca - esta
no es uno que hemos hablado, pero uno

966
00:47:09,720 --> 00:47:11,580
usted puede buscar en Google si quieres.

967
00:47:11,580 --> 00:47:15,130
Esto se llama prettify.js.

968
00:47:15,130 --> 00:47:20,650
Y será sintaxis resaltar su código
para usted, utilizando tanto CSS y JavaScript.

969
00:47:20,650 --> 00:47:23,480

970
00:47:23,480 --> 00:47:27,070
>> La última cosa que queremos hablar de
antes de divulgar que salir a la

971
00:47:27,070 --> 00:47:30,620
mundo a mirar en las bibliotecas de averiguar
cómo usarlos y, con suerte,

972
00:47:30,620 --> 00:47:34,640
leer la documentación y encontrar lo que
necesidad es cómo encontrar bibliotecas.

973
00:47:34,640 --> 00:47:37,000
Así que la primera es sólo somos
va a empujar Google.

974
00:47:37,000 --> 00:47:37,810
Ir Google.

975
00:47:37,810 --> 00:47:41,150
>> Eso es, literalmente, lo que hacemos cuando nos
tenga que hacer algo que es Google.

976
00:47:41,150 --> 00:47:44,730
¿Existe una biblioteca de JavaScript que
me permite manipular el tiempo en un

977
00:47:44,730 --> 00:47:45,400
manera útil?

978
00:47:45,400 --> 00:47:49,510
Así que si yo sé que algún usuario que crea
una cuenta aquí, y este es el

979
00:47:49,510 --> 00:47:53,010
hora actual, ¿cómo puedo calcular el
diferencia con que sin tener que

980
00:47:53,010 --> 00:47:55,020
calcularlo yo mismo?

981
00:47:55,020 --> 00:47:59,630
Así que esto es realmente una cosa común,
JavaScript biblioteca tiempo.

982
00:47:59,630 --> 00:48:02,440
Y aquí Moment.js--
el más popular.

983
00:48:02,440 --> 00:48:06,530
>> Si necesitamos una biblioteca para manipular
algo así como el color para poder

984
00:48:06,530 --> 00:48:08,650
generar un montón de colores al azar -

985
00:48:08,650 --> 00:48:10,660
posiblemente, para generar una
estilo o algo -

986
00:48:10,660 --> 00:48:13,480
podríamos buscar en Google algo así como
JavaScript biblioteca de colores.

987
00:48:13,480 --> 00:48:15,620
Y estoy seguro de que habría una ventana con
un mil y uno de ellos.

988
00:48:15,620 --> 00:48:18,290

989
00:48:18,290 --> 00:48:21,410
Le invitamos a leer a través de ellos.

990
00:48:21,410 --> 00:48:24,610
>> Así que la mayoría de las cosas - cuando usted los encuentra -
van ser alojado en uno de los

991
00:48:24,610 --> 00:48:25,920
sitios que codifican host.

992
00:48:25,920 --> 00:48:26,960
Son algunas de los más populares.

993
00:48:26,960 --> 00:48:30,870
El más popular, por
ahora, es github.com.

994
00:48:30,870 --> 00:48:35,300
Y si vas a GitHub en realidad es
donde fue acogido Normalizar.

995
00:48:35,300 --> 00:48:36,950
Así que si quiere volver a esa.

996
00:48:36,950 --> 00:48:38,135
Muéstrales que.

997
00:48:38,135 --> 00:48:40,516
>> MIKE RIZZO: Y eso es en realidad donde
esta se encuentra alojado también, si te diste cuenta.

998
00:48:40,516 --> 00:48:41,000
>> TOMAS REIMERS: Si.

999
00:48:41,000 --> 00:48:49,078
Así que si vas a Normalizar
e ir a la GitHub.

1000
00:48:49,078 --> 00:48:51,936
Eran es eso?

1001
00:48:51,936 --> 00:48:54,620
>> MIKE RIZZO: Esa cosita gato
es el símbolo de GitHub.

1002
00:48:54,620 --> 00:48:56,330
>> TOMAS REIMERS: Oh.

1003
00:48:56,330 --> 00:49:02,180
Así GitHub utiliza un método llamado
Git al código de tienda.

1004
00:49:02,180 --> 00:49:05,150
Es que usted no sabe lo que es o
que te asusta, eso está bien.

1005
00:49:05,150 --> 00:49:16,100
Usted no tiene que saber qué es Git
porque GitHub tiene un botón de descarga

1006
00:49:16,100 --> 00:49:17,200
en la parte inferior derecha.

1007
00:49:17,200 --> 00:49:21,350
>> La otra cosa útil saber
sobre GitHub es la mayoría de los productos

1008
00:49:21,350 --> 00:49:23,200
tendrá un me leen.

1009
00:49:23,200 --> 00:49:25,400
Y si no tienen un sitio web, la
leo me voy a hablar sobre cómo se

1010
00:49:25,400 --> 00:49:28,310
instalarlo, cómo lo usa, lo que
hace, et cetera, et cetera, et cetera.

1011
00:49:28,310 --> 00:49:31,033
Lo que básicamente hemos estado
caminar a través.

1012
00:49:31,033 --> 00:49:32,326
>> MIKE RIZZO: dejar de fumar de Internet.

1013
00:49:32,326 --> 00:49:34,020
>> TOMAS REIMERS: Eso está bien.

1014
00:49:34,020 --> 00:49:36,980
Las dos últimas cosas que queríamos
para hablar de -

1015
00:49:36,980 --> 00:49:38,750
hemos hablado de Git -

1016
00:49:38,750 --> 00:49:40,290
es la solución de problemas.

1017
00:49:40,290 --> 00:49:43,020
Y éste no es tan relevante para la
el producto final, ya que es

1018
00:49:43,020 --> 00:49:44,870
cuando salga de 50.

1019
00:49:44,870 --> 00:49:48,310
Y cuando te encuentras con productos
la implementación de bibliotecas o la aplicación de

1020
00:49:48,310 --> 00:49:50,230
su propio proyecto, vas
tener preguntas o estás

1021
00:49:50,230 --> 00:49:51,660
ir a buscar a las preguntas.

1022
00:49:51,660 --> 00:49:53,060
>> Una vez más, buscar en Google.

1023
00:49:53,060 --> 00:49:54,630
Eso es, literalmente, lo que hacemos.

1024
00:49:54,630 --> 00:49:56,400
Esto va a sonar tonto.

1025
00:49:56,400 --> 00:49:58,310
Pero, literalmente, que Google se.

1026
00:49:58,310 --> 00:50:01,810
Y de nuevo, una de las primeras cosas
por lo general, se encuentra con que es

1027
00:50:01,810 --> 00:50:06,550
stackoverflow.com, que es una maravilla
preguntas y respuestas a la vista.

1028
00:50:06,550 --> 00:50:10,530
>> Es maravilloso, tanto porque se puede
Publicación de las preguntas y buscar

1029
00:50:10,530 --> 00:50:12,760
respuestas sino también porque
que ya tiene una gran cantidad de

1030
00:50:12,760 --> 00:50:14,590
contenido ya se encuentra completa allí.

1031
00:50:14,590 --> 00:50:18,510
Así que por lo general cuando se busca en Google una programación
cuestión en el primer

1032
00:50:18,510 --> 00:50:22,620
pareja golpea es posible que ya haya ejecutado
en ella durante sus boletines de problemas.

1033
00:50:22,620 --> 00:50:27,840
>> Y luego, lo último que realmente breve
es JSFIDDLE, que es - hoy hemos

1034
00:50:27,840 --> 00:50:32,110
estado haciendo un montón de trabajo con
JavaScript HTML CSS.

1035
00:50:32,110 --> 00:50:39,820
JSFIDDLE es una aplicación web, que básicamente
le permite tomar el código HTML, SU

1036
00:50:39,820 --> 00:50:42,820
JavaScript parte inferior izquierda, y
su parte superior derecha CSS.

1037
00:50:42,820 --> 00:50:47,840
Y entonces se puede crear un render rápido
de ella y ver cómo interactúa.

1038
00:50:47,840 --> 00:50:50,500
Es muy útil cuando las personas están tratando
hacer una prueba de concepto como

1039
00:50:50,500 --> 00:50:52,910
así es como lo haría
hacer un menú desplegable.

1040
00:50:52,910 --> 00:50:54,980
Tal vez un destape rápido o lo que sea.

1041
00:50:54,980 --> 00:50:56,560
>> MIKE RIZZO: Así que vamos a ir
adelante y haga clic en este.

1042
00:50:56,560 --> 00:50:57,820
Una nota rápida -

1043
00:50:57,820 --> 00:51:00,430
mientras que, antes de que fuéramos
haciendo al hacer clic.

1044
00:51:00,430 --> 00:51:04,380
Resulta que JCorey Corea también ha incorporado un
en controlador de eventos click que

1045
00:51:04,380 --> 00:51:07,020
utiliza sólo porque figura eres
va a querer hacer un montón de cosas

1046
00:51:07,020 --> 00:51:08,410
cuando se quiere algo, haga clic en.

1047
00:51:08,410 --> 00:51:09,690
>> Del mismo modo, también tiene un vuelo estacionario.

1048
00:51:09,690 --> 00:51:12,850
Pero para llegar a todo el ámbito de
esos, un vistazo a la jQuery

1049
00:51:12,850 --> 00:51:15,320
documentación y hacerlo.

1050
00:51:15,320 --> 00:51:18,760
Hice algo estúpido aquí.

1051
00:51:18,760 --> 00:51:21,490
>> TOMAS REIMERS: Así que tengo una muy rápida
programa de aquí, que dice

1052
00:51:21,490 --> 00:51:22,640
botón de clic.

1053
00:51:22,640 --> 00:51:23,890
Entonces tenemos un bucle for.

1054
00:51:23,890 --> 00:51:26,810
Para i es menor que 404.

1055
00:51:26,810 --> 00:51:29,530
Sólo va a aparecer
estos mensajes de alerta.

1056
00:51:29,530 --> 00:51:33,425
>> MIKE RIZZO: ¿Y cuál fue el
código 404 se puso en HTML?

1057
00:51:33,425 --> 00:51:34,145
¿Recuerda alguien?

1058
00:51:34,145 --> 00:51:35,450
No se ha encontrado, a la derecha.

1059
00:51:35,450 --> 00:51:38,640

1060
00:51:38,640 --> 00:51:40,885
Chrome también añadió esta ordenada
cosa donde se puede -

1061
00:51:40,885 --> 00:51:43,430
>> TOMAS REIMERS: Porque la gente como
Mike empezó a hacer esto mucho y

1062
00:51:43,430 --> 00:51:47,230
molestar a los usuarios, lo que permite
a ver info.

1063
00:51:47,230 --> 00:51:48,286
>> MIKE RIZZO: Si.

1064
00:51:48,286 --> 00:51:50,690
>> TOMAS REIMERS: ¿Tenemos alguna pregunta
sobre esto, acerca de JavaScript

1065
00:51:50,690 --> 00:51:53,420
bibliotecas, la búsqueda de bibliotecas o
miradas lo desarrollo web

1066
00:51:53,420 --> 00:51:55,400
como en el mundo real?

1067
00:51:55,400 --> 00:51:56,880
Estamos corriendo contra el tiempo.

1068
00:51:56,880 --> 00:52:00,400
Así que no estoy seguro de que vamos
tener tiempo para poner en práctica

1069
00:52:00,400 --> 00:52:02,290
a menos que sea realmente rápido.

1070
00:52:02,290 --> 00:52:04,580
¿Estamos bien?

1071
00:52:04,580 --> 00:52:08,110
>> MIKE RIZZO: Cualquier cosa que ustedes le gustaría
para ver realmente rápido, como, en dos

1072
00:52:08,110 --> 00:52:09,556
minutos o menos?

1073
00:52:09,556 --> 00:52:10,870
>> TOMAS REIMERS: Cualquier cosa
podemos aclarar?

1074
00:52:10,870 --> 00:52:12,500
Cómo escribir en -

1075
00:52:12,500 --> 00:52:13,260
>> AUDIENCIA: [inaudible]?

1076
00:52:13,260 --> 00:52:16,070
>> MIKE RIZZO: Sí, así que eso es -

1077
00:52:16,070 --> 00:52:18,065
>> TOMAS REIMERS: Usted sólo puede golpear
Control-U en el sitio web.

1078
00:52:18,065 --> 00:52:19,275
>> MIKE RIZZO: Oh, no sabía eso.

1079
00:52:19,275 --> 00:52:22,290
>> TOMAS REIMERS: Yo creo, sí.

1080
00:52:22,290 --> 00:52:23,300
Control-U. Sí.

1081
00:52:23,300 --> 00:52:25,970
>> MIKE RIZZO: Oh, así que esa es la
código de la página web.

1082
00:52:25,970 --> 00:52:29,580
Pero si usted realmente desea descargar nuestro
archivos y todo, se encuentra alojada

1083
00:52:29,580 --> 00:52:32,650
en github.com

1084
00:52:32,650 --> 00:52:34,850
>> TOMAS REIMERS: recortar mi nombre -

1085
00:52:34,850 --> 00:52:38,504
Tomas Reimers - slash
Seminario de guión CS50.

1086
00:52:38,504 --> 00:52:40,710
>> MIKE RIZZO: Y usted puede
encontrar de todo allí.

1087
00:52:40,710 --> 00:52:42,310
>> TOMAS REIMERS: Esto es lo que GitHub
parece, por cierto.

1088
00:52:42,310 --> 00:52:44,910
Así que de nuevo, cuando se ve una fuente abierta
proyecto, por lo general, que va a ser una lectura

1089
00:52:44,910 --> 00:52:45,950
yo ahí que usted puede leer.

1090
00:52:45,950 --> 00:52:50,200
Y si vuelves, te darás cuenta de que
usted tiene el zip de descarga, que se

1091
00:52:50,200 --> 00:52:52,130
le permiten descargar la fuente
código para incluir la

1092
00:52:52,130 --> 00:52:53,666
producto en su propia cosa.

1093
00:52:53,666 --> 00:52:56,890
>> MIKE RIZZO: Sí, y si sólo click
en las index.html muy rápidamente -

1094
00:52:56,890 --> 00:52:59,180
>> TOMAS REIMERS: Usted verá aquí está la
código fuente de nuestro sitio web.

1095
00:52:59,180 --> 00:53:02,016

1096
00:53:02,016 --> 00:53:06,070
>> MIKE RIZZO: También, me olvidé de empuje derecho
antes de la gran mesa que

1097
00:53:06,070 --> 00:53:09,860
incluidos, pero también hay una mesa
de chmods que se incluyeron

1098
00:53:09,860 --> 00:53:13,210
sólo por su claridad.

1099
00:53:13,210 --> 00:53:16,940
Pero si nos desplazamos hasta el fondo de la
inferior, en realidad no nos hacemos muy

1100
00:53:16,940 --> 00:53:21,160
tanto con el código JavaScript
cosas en absoluto con esto.

1101
00:53:21,160 --> 00:53:26,610
Es exclusivamente a partir de todo lo
otra cosa que lo que teníamos.

1102
00:53:26,610 --> 00:53:28,730
>> Así que gracias chicos por venir
y escuchando.

1103
00:53:28,730 --> 00:53:29,830
Esperamos que este era muy servicial.

1104
00:53:29,830 --> 00:53:33,020
Si usted tiene alguna JavaScript relacionada
preguntas o simplemente quiere hablar

1105
00:53:33,020 --> 00:53:36,240
¿qué otra cosa como lo que otras cosas interesantes
se puede hacer con JavaScript, nos encantaría

1106
00:53:36,240 --> 00:53:37,186
hablar con usted.

1107
00:53:37,186 --> 00:53:40,010
>> TOMAS REIMERS: Si usted tiene una pregunta
acerca de su proyecto o si esto puede ser

1108
00:53:40,010 --> 00:53:42,740
relevante, probablemente vamos quedemos
un poco después de este.

1109
00:53:42,740 --> 00:53:44,640
Pero aparte de eso, tienen
un buen fin de semana.

1110
00:53:44,640 --> 00:53:45,845
>> MIKE RIZZO: Sí, disfrutar.

1111
00:53:45,845 --> 00:53:46,120
Nos vemos chicos.

1112
00:53:46,120 --> 00:53:47,370
>> TOMAS REIMERS: Nos vemos.

1113
00:53:47,370 --> 00:53:47,926