1
00:00:00,000 --> 00:00:02,440
[Powered by Google Translate] [Semana 7]

2
00:00:02,440 --> 00:00:04,730
[David J. Malan - Harvard University]

3
00:00:04,730 --> 00:00:07,490
[Esta es CS50. - CS50.TV]

4
00:00:07,490 --> 00:00:12,280
Está bien. Bienvenido de nuevo. Esto es CS50, y este es el comienzo de la semana 7.

5
00:00:12,280 --> 00:00:14,690
Un par de anuncios pequeños:

6
00:00:14,690 --> 00:00:18,150
Pset5 está ahora en progreso, o pronto lo serán,

7
00:00:18,150 --> 00:00:21,590
y déjenme decirles, sinceramente, este tiende a ser uno de los más difíciles

8
00:00:21,590 --> 00:00:24,460
de conjuntos de problemas del curso, así que vamos a mencionar esto ahora

9
00:00:24,460 --> 00:00:28,190
por lo que esta semana más que nunca no se espera hasta, digamos, la noche del miércoles

10
00:00:28,190 --> 00:00:29,920
o jueves por la noche a zambullirse

11
00:00:29,920 --> 00:00:32,369
Este es sin duda un conjunto de procesadores interesante. Creemos que es divertido.

12
00:00:32,369 --> 00:00:36,110
Si usted consigue realmente es totalmente correcta y luego puede impugnar la Bolsa de Nueva York llamada,

13
00:00:36,110 --> 00:00:39,830
usted tendrá la oportunidad de emparejar ingenios con una parte del personal del curso

14
00:00:39,830 --> 00:00:41,620
y algunos de sus compañeros de clase.

15
00:00:41,620 --> 00:00:44,670
¿Qué es la Bolsa de Nueva York es una vez que su corrector ortográfico de trabajo,

16
00:00:44,670 --> 00:00:48,860
usted será capaz de ir a cs50.net después de ejecutar un comando,

17
00:00:48,860 --> 00:00:52,430
puramente optar en, y entonces la cantidad de tiempo y la cantidad de RAM y más

18
00:00:52,430 --> 00:00:56,130
que ha utilizado en su implementación se exhibirán aquí en la página de inicio del curso.

19
00:00:56,130 --> 00:00:59,740
Se dará cuenta de que una gran cantidad de estas personas aquí están listados como personal

20
00:00:59,740 --> 00:01:04,220
desde el fin de semana, el equipo pensó que sería divertido para tratar de superarse unos a otros.

21
00:01:04,220 --> 00:01:07,390
Así que darse cuenta de que el objetivo aquí no es superar a los empleados.

22
00:01:07,390 --> 00:01:09,790
Incluso yo no soy más que aquí, en el número 13.

23
00:01:09,790 --> 00:01:13,790
Puramente aceptas, pero es una oportunidad para ver lo poco RAM

24
00:01:13,790 --> 00:01:16,790
y qué pocos segundos de la CPU se puede utilizar vis-a-vis algunos de sus compañeros de clase.

25
00:01:16,790 --> 00:01:20,540
>> Y voy a admitir que Kevin Michael Schmid,

26
00:01:20,540 --> 00:01:23,750
Actualmente, en el número 1 posición como uno de los TF,

27
00:01:23,750 --> 00:01:28,120
se trata de una aplicación que no es posible llamar

28
00:01:28,120 --> 00:01:32,700
dado que él está usando casi 0 RAM y casi 0 segundos para la carga.

29
00:01:32,700 --> 00:01:35,670
Así que vamos a cuidar desconectado Kevin. [Risas]

30
00:01:35,670 --> 00:01:40,950
Hay ciertas habilidades que Kevin está poniendo a prueba aquí.

31
00:01:40,950 --> 00:01:45,280
Una de las cosas que pensamos que haríamos ahora es demasiado CS50x es una semana en curso,

32
00:01:45,280 --> 00:01:49,520
y ustedes son una parte tan importante de este experimento como los estudiantes son.

33
00:01:49,520 --> 00:01:53,720
Les hemos pedido como parte de su pset0, que era similar al presentar un proyecto de Scratch

34
00:01:53,720 --> 00:01:58,280
de interés para ellos - un juego, una pieza de arte interactivo, la animación, o similares -

35
00:01:58,280 --> 00:02:03,700
un 1 - vídeo a 2 minutos, si quieren, saludando a todo el mundo y que son en realidad.

36
00:02:03,700 --> 00:02:06,780
Yo pensé en compartir con ustedes un par de los videos que se han presentado hasta el momento

37
00:02:06,780 --> 00:02:10,759
porque para nosotros, por el personal por lo menos, lo que realmente ha sido emocionante

38
00:02:10,759 --> 00:02:14,220
y inspirador ver a esta gente de todo el mundo - los países de todo el mundo -

39
00:02:14,220 --> 00:02:18,160
en sintonía, de todas las cosas, a un curso de informática en Internet,

40
00:02:18,160 --> 00:02:20,410
ya sea porque desean continuar sus estudios,

41
00:02:20,410 --> 00:02:22,300
quieren tomar su carrera en una nueva dirección,

42
00:02:22,300 --> 00:02:24,390
quieren llenar las lagunas de su propio conocimiento,

43
00:02:24,390 --> 00:02:27,190
por lo que algunas de las mismas razones que ustedes tal vez han estado aquí.

44
00:02:27,190 --> 00:02:31,090
>> Así que le doy un tal estudiante aquí. Podrías subir el volumen un poco.

45
00:02:31,090 --> 00:02:35,520
Aquí está uno de 1-minuto presentaciones de nuestros estudiantes.

46
00:02:35,520 --> 00:02:40,380
¡Hola, mundo. Soy un estudiante de ingeniería industrial aquí en Málaga, España.

47
00:02:40,380 --> 00:02:45,840
Estoy muy emocionado con este curso porque me gusta la informática, de verdad,

48
00:02:45,840 --> 00:02:48,880
y yo realmente aprecio que me pongo a explorarlo.

49
00:02:48,880 --> 00:02:51,940
Y el hecho de que puedo aprender lo mismo todo lo que ustedes hacen

50
00:02:51,940 --> 00:02:57,040
pero en lugar de estar en Harvard estoy en Málaga, lo maravilloso es eso?

51
00:02:57,040 --> 00:03:02,040
Bueno, soy Fernando, y esto es CS50. Nos vemos.

52
00:03:02,040 --> 00:03:07,100
[Risas] Otro clip en particular nos gusta, usted encontrará que este caballero Inglés no es tan fuerte.

53
00:03:07,100 --> 00:03:11,520
Parece que tenía una traducción automática, por lo que las propias traducciones son un poco imperfecta,

54
00:03:11,520 --> 00:03:15,790
pero este era uno de nuestros favoritos hasta ahora, así.

55
00:03:25,080 --> 00:03:29,980
[♪ ♪]

56
00:03:29,980 --> 00:03:32,370
¡Hola, mundo. [Hablando en japonés]

57
00:03:32,370 --> 00:03:39,830
[Tengo que saludar en japonés porque mi Inglés es muy poco fiable.]

58
00:03:39,830 --> 00:03:45,380
[He entregado el mensaje a usted de la ciudad de Gifu, Japón.]

59
00:03:45,380 --> 00:03:49,820
[I puede ser un estudiante por primera vez en 20 años, como se puede ver.]

60
00:03:49,820 --> 00:03:54,640
[Estoy muy agradecido a la Universidad de Harvard, quien me dio esta oportunidad y EDX.]

61
00:03:54,640 --> 00:04:01,510
[El golf es una guitarra y dirigiendo mi cosa favorita.] [Risas]

62
00:04:01,510 --> 00:04:05,750
[♪ ♪]

63
00:04:05,750 --> 00:04:10,790
[¿Por qué cree usted que yo estaba tratando de asistir a una cs50x.]

64
00:04:10,790 --> 00:04:14,990
[Universidad de Harvard, es mi anhelo.]

65
00:04:14,990 --> 00:04:19,740
[Especialmente si estoy presencia lejana vivía en Japón.]

66
00:04:19,740 --> 00:04:26,680
[Yo quería probar inmediatamente consciente de la existencia de tal EDX cuándo.]

67
00:04:26,680 --> 00:04:32,500
[¿No te parece lo que no es relacionado con la edad de aprendizaje I.]

68
00:04:32,500 --> 00:04:38,350
[CS50 es mi anhelo. Mi nombre es Kazu, y esto es CS50.]

69
00:04:38,350 --> 00:04:43,090
[♪ ♪] [aplausos y vítores]

70
00:04:43,090 --> 00:04:49,220
Otro de los favoritos de nuestra era esta presentación aquí de alguien.

71
00:04:51,070 --> 00:04:55,380
[♪ ♪] [Malan] Google si no está familiarizado con este meme.

72
00:04:55,380 --> 00:05:01,480
>> Y por último, un par de otros que he publicado que tal vez ganar el premio adorable.

73
00:05:01,480 --> 00:05:06,820
[Estudiantes] Aww! >> [Malan] Vamos a tener que escuchar. Este es corta, así que escucha con atención.

74
00:05:08,580 --> 00:05:11,150
[Speaker mujer] ¿Cuál es tu nombre? >> Louie.

75
00:05:11,150 --> 00:05:16,120
[Speaker mujer] ¿Qué es esto? >> [Risas] CS50. [Risas]

76
00:05:16,120 --> 00:05:19,510
[Malan] Él hizo dos tomas, sin embargo.

77
00:05:19,510 --> 00:05:22,240
Aquí vamos, la última.

78
00:05:23,030 --> 00:05:26,980
Mi nombre es Louie, y esto es CS50.

79
00:05:26,980 --> 00:05:30,250
[Risas] Esta es, pues, CS50x.

80
00:05:30,250 --> 00:05:33,230
¡Gracias a todos aquellos de ustedes mientras sigue en casa

81
00:05:33,230 --> 00:05:35,620
que han sido hasta ahora participar.

82
00:05:35,620 --> 00:05:39,510
Hoy en día, podemos concluir nuestro análisis de estructuras de datos,

83
00:05:39,510 --> 00:05:41,160
al menos algunos de los más fundamentales,

84
00:05:41,160 --> 00:05:44,760
y luego continuamos nuestra conversación sobre HTML y programación web.

85
00:05:44,760 --> 00:05:48,520
De hecho, hemos pasado el pasado unos siete semanas buscando en los fundamentos de la programación -

86
00:05:48,520 --> 00:05:50,450
algoritmos, estructuras de datos y similares -

87
00:05:50,450 --> 00:05:53,050
y C, como usted puede haber experimentado hasta el momento,

88
00:05:53,050 --> 00:05:57,060
no es necesariamente el más accesible de los idiomas

89
00:05:57,060 --> 00:05:59,090
con el que poner en práctica algunas de esas ideas.

90
00:05:59,090 --> 00:06:01,880
Y así comienza esta semana y la próxima semana y luego el siguiente,

91
00:06:01,880 --> 00:06:07,110
que finalmente será capaz de hacer la transición de C, la cual se conoce generalmente como un lenguaje de nivel bastante bajo,

92
00:06:07,110 --> 00:06:11,190
a las cosas de nivel superior, entre ellos PHP, JavaScript, y similares,

93
00:06:11,190 --> 00:06:14,850
que veremos recurrir a las mismas lecciones que hemos aprendido a lo largo de las últimas semanas,

94
00:06:14,850 --> 00:06:19,430
pero usted encontrará que declarar cosas como matrices y tablas hash y de búsqueda y ordenación

95
00:06:19,430 --> 00:06:23,370
convertido en mucho más fácil porque las lenguas mismas que vamos a empezar a utilizar

96
00:06:23,370 --> 00:06:25,290
se hará más poderoso.

97
00:06:25,290 --> 00:06:27,410
Pero primero, una aplicación de árboles.

98
00:06:27,410 --> 00:06:30,240
Es muy común en estos días a tener que comprimir la información.

99
00:06:30,240 --> 00:06:34,770
¿En qué contexto se desea comprimir algún tipo de información digital?

100
00:06:37,190 --> 00:06:39,670
>> Si. >> [Estudiante] Cuando tenga que enviarlo a través de Internet.

101
00:06:39,670 --> 00:06:41,450
Sí, cuando usted desea enviar algo a través de Internet.

102
00:06:41,450 --> 00:06:44,950
Si desea descargar un archivo de gran tamaño, es ideal si alguien en el otro extremo

103
00:06:44,950 --> 00:06:48,760
ha comprimido el archivo con un formato zip o algo por el estilo

104
00:06:48,760 --> 00:06:53,760
de modo que va a enviar menos bits que de otro modo podrían ser transmitidos.

105
00:06:53,760 --> 00:06:55,500
Entonces, ¿cómo comprimir la información?

106
00:06:55,500 --> 00:07:00,540
Todo se reduce a la utilización de un menor número de bits que se requieren de forma predeterminada.

107
00:07:00,540 --> 00:07:03,220
Pero esto es una especie de cosa curiosa porque piense de nuevo a las semanas 0 y 1

108
00:07:03,220 --> 00:07:07,370
cuando hablamos de ASCII y binario y hablamos de ASCII en particular

109
00:07:07,370 --> 00:07:10,690
como el uso de 8 bits para representar letras del alfabeto

110
00:07:10,690 --> 00:07:16,120
de modo que la letra A se representa por 65, minúsculas a es el número 97,

111
00:07:16,120 --> 00:07:21,210
y sin embargo representan el 65 o el 97, que está usando 7 u 8 bits.

112
00:07:21,210 --> 00:07:24,120
Pero el problema es que hay algunas letras en el alfabeto Inglés

113
00:07:24,120 --> 00:07:26,230
que no son tan populares como otros.

114
00:07:26,230 --> 00:07:31,600
Z no es tan popular, Q no es tan popular, pero A y E son muy populares.

115
00:07:31,600 --> 00:07:37,280
Y aun con todas estas cartas, por defecto el mundo utiliza el mismo número de bits, a 8.

116
00:07:37,280 --> 00:07:42,690
Entonces, ¿no hubiera sido más inteligente si en lugar de utilizar 8 bits para cada letra,

117
00:07:42,690 --> 00:07:47,440
incluso el más frecuentemente utilizado como Q y Z,

118
00:07:47,440 --> 00:07:51,910
¿Y si usamos menos bits para A y E y S y las letras más populares

119
00:07:51,910 --> 00:07:55,000
y se utiliza más bits para las letras menos populares,

120
00:07:55,000 --> 00:07:57,770
la idea es optimizar vamos para el caso común,

121
00:07:57,770 --> 00:08:01,160
que es un tema en ciencias de la computación de tratar de optimizar lo que va a pasar la mayor parte del

122
00:08:01,160 --> 00:08:05,310
y pasar un poco de tiempo más, un poco más de espacio en las cosas que, sí, podría suceder

123
00:08:05,310 --> 00:08:07,680
pero no necesariamente con la frecuencia.

124
00:08:07,680 --> 00:08:09,330
Así que vamos a tomar un ejemplo.

125
00:08:09,330 --> 00:08:12,610
>> Supongamos que queremos codificar información bastante eficiente.

126
00:08:12,610 --> 00:08:15,090
Es posible que haya crecido sin conocer un poco sobre el código Morse,

127
00:08:15,090 --> 00:08:17,450
y las probabilidades son que usted no sabía el código actual,

128
00:08:17,450 --> 00:08:21,750
pero se puede recordar que es por lo menos de esta serie de puntos y rayas.

129
00:08:21,750 --> 00:08:26,640
Se trata de una codificación bastante eficientes, y el aviso de que la letra más popular - por ejemplo, E -

130
00:08:26,640 --> 00:08:28,980
utiliza la más corta de pitidos.

131
00:08:28,980 --> 00:08:31,740
El código Morse es todo acerca de bip-bip-bip-bip-bip-bip y la celebración de los tonos

132
00:08:31,740 --> 00:08:34,799
ya sea por períodos cortos de tiempo o durante largos períodos de tiempo.

133
00:08:34,799 --> 00:08:40,330
E, como se indica en el punto, es un sonido súper corto, sólo pitido, y que representaría E.

134
00:08:40,330 --> 00:08:43,960
Por el contrario, T sería un pitido largo, como un pitido [prolonga sonido]

135
00:08:43,960 --> 00:08:45,710
y que representaría T.

136
00:08:45,710 --> 00:08:48,840
Pero eso es todavía muy corto, ya que, por el contrario, si nos fijamos en Z,

137
00:08:48,840 --> 00:08:52,690
para expresar Z va a ir beep, beep [más sonido], beep, beep [sonido corto].

138
00:08:52,690 --> 00:08:55,360
Así que es más porque es menos común.

139
00:08:55,360 --> 00:08:58,150
Pero te tengo aquí es que el código Morse es un poco deficiente

140
00:08:58,150 --> 00:09:00,610
en que no es inmediatamente decodificable.

141
00:09:00,610 --> 00:09:07,350
Por ejemplo, supongamos que usted oye en algún extremo del cable de señal sonora [corto], beep [largo].

142
00:09:07,350 --> 00:09:12,480
¿Qué mensaje Acabo de recibir? Un punto y un guión. ¿Qué es lo que representa?

143
00:09:12,480 --> 00:09:15,330
[Estudiante] A. >> [Malan] Puede ser.

144
00:09:15,330 --> 00:09:18,270
También podría ser E seguido de T.

145
00:09:18,270 --> 00:09:23,390
En otras palabras, el código Morse, aunque se aprovecha este principio de optimizar el caso de la esquina,

146
00:09:23,390 --> 00:09:26,250
que no se presta a la capacidad de decodificación inmediata.

147
00:09:26,250 --> 00:09:29,850
Es decir, el ser humano que está escuchando o recibir estos puntos y rayas

148
00:09:29,850 --> 00:09:34,540
tiene que encontrar alguna manera de dónde están los saltos entre letras,

149
00:09:34,540 --> 00:09:39,660
porque si usted no sabe dónde están los saltos, puede confundir A para ET o viceversa.

150
00:09:39,660 --> 00:09:43,880
>> Entonces, ¿qué podría hacer? En código Morse sólo podría hacer una pausa entre cada una de las letras.

151
00:09:43,880 --> 00:09:47,660
Pero es una especie de pausa en contra de toda la cuestión de acelerar las cosas.

152
00:09:47,660 --> 00:09:52,880
¿Y si en vez de eso se acercó con un código en el que no fue esta mala situación

153
00:09:52,880 --> 00:09:56,570
donde E es un prefijo, por ejemplo, de A -

154
00:09:56,570 --> 00:10:00,020
en otras palabras, si pudiéramos asegurar que los patrones son todavía corto para las letras populares

155
00:10:00,020 --> 00:10:04,850
tiempo para que las cartas menos populares, pero no hay confusión posible?

156
00:10:04,850 --> 00:10:08,930
Un hombre con el nombre de Huffman años inventó este plan denominado codificación de Huffman

157
00:10:08,930 --> 00:10:12,390
que realmente aprovecha una de las estructuras de datos que hemos pasado un poco de tiempo hablando de

158
00:10:12,390 --> 00:10:16,560
La semana pasada, la de los árboles, los árboles binarios en concreto -

159
00:10:16,560 --> 00:10:19,710
un significado árbol binario que no tiene más de 2 niños.

160
00:10:19,710 --> 00:10:22,720
Tiene tal vez un hijo izquierdo, tal vez un hijo derecho, y eso es todo.

161
00:10:22,720 --> 00:10:26,510
Así que supongo que por el simple hecho de la discusión que alguien quiere enviar un mensaje

162
00:10:26,510 --> 00:10:31,270
que se parece a esto. Es una tontería pero está compuesto de As, Bs, Cs, Ds, y ES.

163
00:10:31,270 --> 00:10:34,890
Y si realmente contar todo lo de la As, Bs, Cs, Ds, y Es

164
00:10:34,890 --> 00:10:36,870
y se divide por el número total de cartas,

165
00:10:36,870 --> 00:10:42,710
esta pequeña carta aquí dice que el 45% de las cartas son Es, el 20% son As,

166
00:10:42,710 --> 00:10:45,010
10% B, y así sucesivamente.

167
00:10:45,010 --> 00:10:47,330
En otras palabras, se supone que la cadena citada allí

168
00:10:47,330 --> 00:10:49,080
es sólo un mensaje que desea enviar.

169
00:10:49,080 --> 00:10:52,180
Le pasa a ser una tontería, así que puede utilizar como pocas cartas como sea posible,

170
00:10:52,180 --> 00:10:55,220
pero es de hecho el caso de que E sigue siendo el más popular,

171
00:10:55,220 --> 00:11:01,450
y B y C son las menos populares, por lo menos una de estas 5 letras del alfabeto.

172
00:11:01,450 --> 00:11:04,040
Entonces, ¿cómo hacemos para dar con una codificación,

173
00:11:04,040 --> 00:11:08,430
una codificación binaria, un patrón de 0 y 1 para cada una de estas cartas

174
00:11:08,430 --> 00:11:14,820
de tal manera que E es un patrón corto y tal vez B y C son ligeramente más largas patrones,

175
00:11:14,820 --> 00:11:19,270
de nuevo, la idea es que queremos utilizar menos bits mayor parte del tiempo

176
00:11:19,270 --> 00:11:21,790
y más bits sólo de vez en cuando.

177
00:11:21,790 --> 00:11:26,070
De acuerdo con la codificación Huffman, puede crear un bosque de árboles.

178
00:11:26,070 --> 00:11:31,190
Hay una especie de una historia aquí que supone árboles y también el proceso de construcción para arriba.

179
00:11:31,190 --> 00:11:32,420
Vamos a comenzar.

180
00:11:32,420 --> 00:11:36,140
>> Propongo que se inicia con este bosque, por así decirlo, de 5 árboles,

181
00:11:36,140 --> 00:11:38,260
cada uno de los cuales es un árbol bastante estúpido.

182
00:11:38,260 --> 00:11:42,800
El árbol está compuesta de sólo un único nodo, representado aquí por un círculo.

183
00:11:42,800 --> 00:11:45,310
Así que cada una de estas cosas puede ser una estructura C

184
00:11:45,310 --> 00:11:50,200
y en el interior de la estructura C podría ser un flotador que representa el conteo de frecuencia

185
00:11:50,200 --> 00:11:52,510
y luego tal vez un char que representa la letra.

186
00:11:52,510 --> 00:11:56,470
Así que piensa en estos nodos como cualquier vieja estructura C, pero, por ahora, un nivel más alto.

187
00:11:56,470 --> 00:12:01,230
Se trata de un bosque de 5 árboles, cada uno de los que sólo tienen un solo nodo.

188
00:12:01,230 --> 00:12:06,830
¿Qué Huffman propuesta es que empezamos a combinar esos árboles

189
00:12:06,830 --> 00:12:11,140
que tienen los más pequeños cuenta con frecuencia en los árboles un poco más grande

190
00:12:11,140 --> 00:12:13,490
mediante la conexión con un nodo raíz.

191
00:12:13,490 --> 00:12:17,560
Así que entre las cartas aquí, note que por comodidad he ordenados de izquierda a derecha,

192
00:12:17,560 --> 00:12:21,420
aunque esto no es estrictamente necesario, y observe que los más pequeños nodos

193
00:12:21,420 --> 00:12:23,930
Actualmente el 10% y el 10%.

194
00:12:23,930 --> 00:12:28,940
Así Huffman propuso que fusionar esos dos pequeños nodos en un árbol nuevo

195
00:12:28,940 --> 00:12:34,450
mediante la introducción de un nuevo nodo primario y luego dar ese padre un hijo izquierdo y un hijo derecho

196
00:12:34,450 --> 00:12:37,720
donde B es arbitrariamente la izquierda y C es arbitrariamente la derecha.

197
00:12:37,720 --> 00:12:41,590
Y luego Huffman propuso además que vamos ahora sólo piensa en el hijo izquierdo

198
00:12:41,590 --> 00:12:44,790
en uno de estos árboles siempre como está representado por 0

199
00:12:44,790 --> 00:12:47,890
y el hijo derecho siempre como está representada por el número 1.

200
00:12:47,890 --> 00:12:50,680
>> No importa si usted darles la vuelta, siempre y cuando usted es consistente.

201
00:12:50,680 --> 00:12:54,650
Así que ahora tenemos cuatro árboles en este bosque.

202
00:12:54,650 --> 00:12:58,050
Y digo cuatro, porque ahora el árbol de la izquierda -

203
00:12:58,050 --> 00:13:00,570
y no es tanto un árbol en el sentido de que crece de esta manera,

204
00:13:00,570 --> 00:13:05,170
es más como un árbol genealógico donde ahora el 0.2 es una especie de padre de los dos niños -

205
00:13:05,170 --> 00:13:07,930
cuenta de que en ese padre que hemos dibujado 0.2.

206
00:13:07,930 --> 00:13:13,370
Hemos añadido las cuentas de la frecuencia de los dos niños y dado el nuevo nodo a la suma total.

207
00:13:13,370 --> 00:13:15,310
Así que ahora sólo tiene que repetir este proceso.

208
00:13:15,310 --> 00:13:19,490
Encuentra los dos nodos más pequeños y luego unirlos en un nuevo árbol

209
00:13:19,490 --> 00:13:21,380
y repita el proceso.

210
00:13:21,380 --> 00:13:26,390
En este momento tenemos unos cuantos candidatos, el 20%, 15%, y otro 20%.

211
00:13:26,390 --> 00:13:29,780
En este caso, tenemos que romper el empate. Podemos hacerlo de forma arbitraria.

212
00:13:29,780 --> 00:13:31,540
Deberíamos hacerlo de forma coherente.

213
00:13:31,540 --> 00:13:33,760
En este caso, arbitrariamente a ir con el otro a la izquierda,

214
00:13:33,760 --> 00:13:39,880
y ahora fusionar el 20% y el 15% de darme un nuevo padre llamó un 35%,

215
00:13:39,880 --> 00:13:46,310
cuyo hijo izquierdo es 0, cuyo derecho es un niño, y ahora tenemos sólo tres árboles en el bosque.

216
00:13:46,310 --> 00:13:47,960
Usted tal vez pueda ver dónde va esto.

217
00:13:47,960 --> 00:13:51,150
Si repetimos esto un par de veces más, vamos a tener un solo árbol más grande,

218
00:13:51,150 --> 00:13:53,900
todos de cuyos bordes están etiquetados con 0s y 1s.

219
00:13:53,900 --> 00:13:55,710
Vamos a hacerlo de nuevo.

220
00:13:55,710 --> 00:14:02,600
35% es la raíz de ese árbol. 20% y 45%, así que vamos a fusionar el 35% y 20%.

221
00:14:02,600 --> 00:14:05,610
Ahora tenemos este árbol aquí. Añadimos los que juntos, tenemos un 55%.

222
00:14:05,610 --> 00:14:07,910
Ahora sólo hay dos árboles en el bosque.

223
00:14:07,910 --> 00:14:11,900
Lo hacemos una vez final, y espero que matemáticamente todas las frecuencias se suman

224
00:14:11,900 --> 00:14:15,570
porque ya se les computa desde el primer momento para sumar 100%.

225
00:14:15,570 --> 00:14:17,960
Y ahora tenemos un árbol.

226
00:14:17,960 --> 00:14:20,580
Así que este es un árbol de Huffman.

227
00:14:20,580 --> 00:14:24,400
En cierto modo se tomó un tiempo para llegar allí verbalmente, pero la realidad es con un bucle for

228
00:14:24,400 --> 00:14:27,620
o con una función recursiva, usted podría construir esta cosa bastante rápido.

229
00:14:27,620 --> 00:14:32,440
Así que ahora tenemos un nuevo nodo, y todos estos nodos interiores han sido malloc'd,

230
00:14:32,440 --> 00:14:34,690
presumiblemente, a lo largo del camino.

231
00:14:34,690 --> 00:14:38,650
Así que ahora en la parte superior de este árbol que tenemos 100%, pero noto ahora tenemos un camino

232
00:14:38,650 --> 00:14:43,780
de esta nueva tatara-tatara-tatara-abuelo de todos los tatara-tatara-tatara-nietos

233
00:14:43,780 --> 00:14:45,930
todo el camino en la parte inferior, para todas las hojas.

234
00:14:45,930 --> 00:14:52,840
>> ¿Qué vamos a hacer ahora es proponer que para representar la letra E,

235
00:14:52,840 --> 00:14:55,670
nos limitaremos a utilizar el número 1. ¿Por qué?

236
00:14:55,670 --> 00:15:01,000
Porque si atravesamos este árbol desde la raíz hasta la última hoja conocida como E,

237
00:15:01,000 --> 00:15:06,050
seguimos un solo borde, el borde derecho, y eso ha marcado, por supuesto, en la parte superior derecha 1.

238
00:15:06,050 --> 00:15:11,550
Así que la implicación aquí para Huffman fue que codifica la E en binario sólo será el 1.

239
00:15:11,550 --> 00:15:14,490
Y eso es muy muy eficiente. No se puede realmente conseguir cualquier menor que eso.

240
00:15:14,490 --> 00:15:18,350
Por el contrario, A se va a representar, si se sigue la lógica,

241
00:15:18,350 --> 00:15:21,610
por qué patrón de bits en su lugar? 01.

242
00:15:21,610 --> 00:15:25,500
Así que para llegar a A, empezamos en la raíz y se va a la izquierda y luego a la derecha,

243
00:15:25,500 --> 00:15:28,580
lo que significa que seguimos a 0 y luego 1 a.

244
00:15:28,580 --> 00:15:32,810
Así que representará la letra A con el patrón de 0 y 1.

245
00:15:32,810 --> 00:15:36,010
Y ahora note que ya tenemos una propiedad de decodificación inmediata

246
00:15:36,010 --> 00:15:38,090
que no teníamos en código Morse.

247
00:15:38,090 --> 00:15:42,840
A pesar de que estos dos patrones son bastante corto - E es de 1 bit, 2 bits A es -

248
00:15:42,840 --> 00:15:45,080
cuenta de que no puede ser confundido uno o el otro,

249
00:15:45,080 --> 00:15:54,870
porque si usted ve un 1 que tiene que ser una E, si usted ve un 0, un 1 es obviamente tiene que haber una A.

250
00:15:54,870 --> 00:15:58,410
Del mismo modo, ¿cuál es D? 001.

251
00:15:58,410 --> 00:16:01,440
¿Qué es C? 0001.

252
00:16:01,440 --> 00:16:05,320
¿Y qué es B? 0000.

253
00:16:05,320 --> 00:16:09,550
Y de nuevo, porque todas las cartas que nos interesan son las hojas

254
00:16:09,550 --> 00:16:13,890
y ninguno de ellos son una especie de intermediarios en el camino de la raíz a las hojas,

255
00:16:13,890 --> 00:16:18,760
no hay riesgo de combinar codificaciones 2 letras los diferentes

256
00:16:18,760 --> 00:16:22,300
porque todos estos patrones de bits son deterministas.

257
00:16:22,300 --> 00:16:25,280
0000 será siempre B.

258
00:16:25,280 --> 00:16:29,480
No hay ningún nodo en algún punto intermedio que podría confundir a una letra para el otro.

259
00:16:29,480 --> 00:16:31,150
Entonces, ¿cuál es la implicación en esta lista?

260
00:16:31,150 --> 00:16:35,080
>> La carta más popular - en este caso E - ha conseguido la codificación más corta,

261
00:16:35,080 --> 00:16:37,430
A ha conseguido la codificación más corta siguiente,

262
00:16:37,430 --> 00:16:41,390
y B y C, que ya sabía desde el primer momento clase eran de los menos populares

263
00:16:41,390 --> 00:16:45,390
el 10% de frecuencia cada una, que han conseguido el mayor codificación.

264
00:16:45,390 --> 00:16:49,410
Y así, lo que esto significa es que si usted desea enviar un mensaje que se comprime

265
00:16:49,410 --> 00:16:51,950
a través de Internet o en un correo electrónico o similar,

266
00:16:51,950 --> 00:16:56,730
en lugar de utilizar ASCII estándar, puede enviar un mensaje codificado Huffman

267
00:16:56,730 --> 00:17:01,720
Que si usted desea enviar la letra E, que acaba de enviar un solo bit.

268
00:17:01,720 --> 00:17:05,680
Si desea enviar una A, envía 2 bits, 01, en lugar de enviar 8 bits

269
00:17:05,680 --> 00:17:10,190
seguido de otros 8 bits seguidas por otras 8 bits y así sucesivamente.

270
00:17:10,190 --> 00:17:11,940
Pero hay un gotcha aquí.

271
00:17:11,940 --> 00:17:17,079
No es suficiente sólo para la construcción de este árbol y luego iniciar el envío de Alice a Bob

272
00:17:17,079 --> 00:17:20,010
el patrón poco más corto, una cadena en ASCII,

273
00:17:20,010 --> 00:17:23,140
porque Alicia también tiene que informar de lo que Bob

274
00:17:23,140 --> 00:17:26,880
Bob si va a ser capaz de leer su mensaje comprimido?

275
00:17:26,880 --> 00:17:30,770
[Respuesta de los estudiantes inaudible] >> ¿Qué es eso?

276
00:17:30,770 --> 00:17:32,310
[Respuesta de los estudiantes inaudible] >> ¿De qué árbol es.

277
00:17:32,310 --> 00:17:35,160
O más específicamente, cuáles son esas codificaciones son,

278
00:17:35,160 --> 00:17:39,010
sobre todo porque durante esta historia hemos hecho un llamado a juicio en un punto.

279
00:17:39,010 --> 00:17:43,640
Recuerde que tuvimos que recoger arbitrariamente entre los dos nodos diferentes de 20%?

280
00:17:43,640 --> 00:17:49,800
Así que no es el caso de que Bob, el receptor, sólo puede reconstruir el árbol por su cuenta

281
00:17:49,800 --> 00:17:53,390
porque a lo mejor va a crear el árbol muy ligeramente diferente a Alice.

282
00:17:53,390 --> 00:17:56,670
Por otra parte, Bob ni siquiera sabe lo que el mensaje original es

283
00:17:56,670 --> 00:18:00,770
porque lo único Alice le está enviando, por supuesto, es el mensaje comprimido.

284
00:18:00,770 --> 00:18:05,900
>> Así que la captura con la compresión de este tipo es que, sí, Alice puede ahorrar un montón de bits

285
00:18:05,900 --> 00:18:09,900
mediante el envío de 1 para E y 01 para A y así sucesivamente,

286
00:18:09,900 --> 00:18:15,180
pero ella también tiene que informar a Bob lo que la cartografía es entre las letras y los bits

287
00:18:15,180 --> 00:18:19,620
porque claramente no puede depender sólo de ASCII más si no estamos usando ASCII.

288
00:18:19,620 --> 00:18:22,200
Así que ella le puede enviar el árbol de alguna manera -

289
00:18:22,200 --> 00:18:26,600
escríbalo, guárdelo como datos binarios o algo así -

290
00:18:26,600 --> 00:18:30,280
o simplemente le enviaremos una hoja de trucos poco, un archivo de Excel, que muestra las asignaciones.

291
00:18:30,280 --> 00:18:36,480
Así que la eficacia de la compresión realmente asume que los mensajes que está enviando

292
00:18:36,480 --> 00:18:40,230
son bastante grandes, por lo menos de tamaño mediano,

293
00:18:40,230 --> 00:18:42,180
porque si usted está enviando un mensaje corto super,

294
00:18:42,180 --> 00:18:45,390
si lo que desea es enviar el mensaje BAD, que pasa a ser una palabra que puede significar aquí,

295
00:18:45,390 --> 00:18:49,550
B-A-D, usted está probablemente va a utilizar menos bits,

296
00:18:49,550 --> 00:18:53,130
pero el problema es si usted también tiene que informar a Bob lo que el árbol es

297
00:18:53,130 --> 00:18:57,530
o cuáles son esas codificaciones son, usted va a pesar más que probable que todos los ahorros

298
00:18:57,530 --> 00:19:00,110
de tener las cosas comprimidas, para empezar.

299
00:19:00,110 --> 00:19:02,210
Así que en realidad puede ser el caso que si se intenta comprimir

300
00:19:02,210 --> 00:19:05,330
incluso con algo así como formatos ZIP o archivo que esté familiarizado con -

301
00:19:05,330 --> 00:19:07,780
archivos muy pequeños, incluso archivos vacíos -

302
00:19:07,780 --> 00:19:10,930
a veces esos archivos pueden conseguir más grande y más pequeño no.

303
00:19:10,930 --> 00:19:14,320
Pero en realidad, esto sucede solamente para tamaños de archivo pequeños,

304
00:19:14,320 --> 00:19:16,920
por lo que no va a hacer un archivo de 2 gigabytes gigabyte ser;

305
00:19:16,920 --> 00:19:19,480
realmente estamos hablando bytes o sólo unos kilobytes de pareja.

306
00:19:19,480 --> 00:19:22,330
>> Algunos programas como zip son lo suficientemente inteligentes para darse cuenta de que,

307
00:19:22,330 --> 00:19:24,590
"Vas a gastar más bits de compresión esto".

308
00:19:24,590 --> 00:19:27,460
"No dejes que me molesta comprimirlo para usted en todo."

309
00:19:27,460 --> 00:19:30,160
Así que esto es sólo una manera de comprimir entonces formato de texto.

310
00:19:30,160 --> 00:19:32,300
Se podría implementar algo como esto en C.

311
00:19:32,300 --> 00:19:35,370
Por ejemplo, aquí está la forma en que podría representar un nodo de este árbol

312
00:19:35,370 --> 00:19:39,320
donde tendremos una charla para el símbolo, un valor flotante para la frecuencia,

313
00:19:39,320 --> 00:19:42,250
y como hemos visto con nuestros otras estructuras de datos, 2 punteros,

314
00:19:42,250 --> 00:19:47,080
1 para el hijo izquierdo, 1 a la derecha, cualquiera de los cuales puede ser NULL,

315
00:19:47,080 --> 00:19:50,850
pero si no, se refiere a un hijo izquierdo y un hijo derecho.

316
00:19:50,850 --> 00:19:55,130
Así que esta es, pues, la codificación de Huffman, y es una forma en que usted puede ir sobre la compresión de la información,

317
00:19:55,130 --> 00:19:57,880
y es sin duda uno de los más fáciles de implementar

318
00:19:57,880 --> 00:20:00,830
en el contexto de, por ejemplo, estructuras de datos de la semana pasada,

319
00:20:00,830 --> 00:20:03,250
aunque incluso los algoritmos más sofisticados existen

320
00:20:03,250 --> 00:20:08,220
que pueden hacer mutaciones aún más sofisticados de los datos.

321
00:20:08,220 --> 00:20:11,640
Cualquier pregunta entonces sobre los árboles, árboles binarios, o la compresión de texto?

322
00:20:11,640 --> 00:20:15,590
[Estudiante] ¿Hay alguna ambigüedad, como si se divide [inaudible] en 01,

323
00:20:15,590 --> 00:20:19,160
011 entonces sería ambiguo, ¿no?

324
00:20:19,160 --> 00:20:22,730
[Inaudible] >> Buena pregunta. La ambigüedad.

325
00:20:22,730 --> 00:20:25,940
Voy a resumir al referirse a este cuadro aquí.

326
00:20:25,940 --> 00:20:29,650
Debido a que los caracteres que se están comprimiendo, las representaciones de,

327
00:20:29,650 --> 00:20:32,850
por definición de este algoritmo siempre permanecen las hojas,

328
00:20:32,850 --> 00:20:41,870
usted nunca va a querer utilizar el mismo patrón de bits para el prefijo de letras múltiples.

329
00:20:41,870 --> 00:20:46,740
En otras palabras, usted está preocupado, que suena, una ambigüedad que surja

330
00:20:46,740 --> 00:20:51,580
001 por el que podría ser el comienzo de B o el inicio de C o algo así.

331
00:20:51,580 --> 00:20:56,780
Pero eso no puede ser así, porque note que todas las letras del alfabeto que estamos codificación

332
00:20:56,780 --> 00:20:58,290
se encuentran en las hojas.

333
00:20:58,290 --> 00:21:01,910
>> La ambigüedad sólo puede surgir, como en el caso del código Morse,

334
00:21:01,910 --> 00:21:06,770
si, por ejemplo, C estaba en algún lugar a lo largo de la ruta desde la raíz a B.

335
00:21:06,770 --> 00:21:12,290
[Estudiante] Derecho. Así que en ese caso, por ejemplo A tiene 2 hojas. >> Say A tiene - Dilo de nuevo.

336
00:21:12,290 --> 00:21:18,760
[Estudiante] Say A tiene dos hojas, F y G, y luego G - >> bien. Pero no puedo.

337
00:21:18,760 --> 00:21:23,230
A sí mismo no podría tener hojas F y G porque esas letras F y G

338
00:21:23,230 --> 00:21:27,560
serían ellos mismos deja en algún lugar a la izquierda de B o el derecho de los E.

339
00:21:27,560 --> 00:21:28,900
Así, por definición, deben ser hojas.

340
00:21:28,900 --> 00:21:32,940
De lo contrario, usted está exactamente correcto, no hemos resuelto el problema que enfrenta el código Morse.

341
00:21:32,940 --> 00:21:38,150
Buena pregunta. Otras preguntas? Está bien.

342
00:21:38,150 --> 00:21:42,050
Esta noción de bits, resulta que hemos tenido a lo largo de todo el poder que en realidad no hemos utilizado

343
00:21:42,050 --> 00:21:44,200
a la hora de manipular estos 0s y 1s.

344
00:21:44,200 --> 00:21:46,600
Le preguntamos acerca de esto en uno de los conjuntos más tempranos de problemas:

345
00:21:46,600 --> 00:21:52,340
a saber, ¿cómo usted va sobre la conversión de mayúsculas a minúsculas o viceversa?

346
00:21:52,340 --> 00:21:55,460
O, más concretamente, uno de esos conjuntos de procesadores primera pregunta

347
00:21:55,460 --> 00:22:01,090
cantidad de bits que es lo que realmente tiene que dar la vuelta para cambiar a minúsculas una A o viceversa?

348
00:22:01,090 --> 00:22:05,580
He aquí un breve recordatorio de lo 65 y 97 parecen en binario.

349
00:22:05,580 --> 00:22:08,060
E incluso si esa cuestión ha desvanecido en especie de su memoria,

350
00:22:08,060 --> 00:22:11,290
se puede ver de nuevo aquí que la cantidad de bits que dar la vuelta

351
00:22:11,290 --> 00:22:15,810
para cambiar mayúscula a minúscula una? Sólo una.

352
00:22:15,810 --> 00:22:19,650
>> Sólo se diferencian en una sola ubicación, el tercer bit de la izquierda.

353
00:22:19,650 --> 00:22:24,240
Mientras que A tiene un 010, un poco tiene un 011.

354
00:22:24,240 --> 00:22:26,250
Entonces, de alguna manera, tenemos que ser capaces de dar la vuelta sólo ese pedacito,

355
00:22:26,250 --> 00:22:29,410
y entonces podemos capitalizar o minúsculas.

356
00:22:29,410 --> 00:22:32,720
Hemos hecho esto en el pasado utilizando de forma efectiva si las condiciones

357
00:22:32,720 --> 00:22:35,930
y comprobar si la carta es entre el capital A y Z capital,

358
00:22:35,930 --> 00:22:41,480
entonces como salidas A - a + 26 o algo así.

359
00:22:41,480 --> 00:22:46,130
Probablemente hizo un cambio aritmético de las letras del alfabeto.

360
00:22:46,130 --> 00:22:49,270
Pero ¿y si pudiéramos dar la vuelta que solo bit?

361
00:22:49,270 --> 00:22:59,080
¿Cómo usted va sobre la pena tomar un byte de bits, por lo que 8 bits 01000001 y 01100001 igual?

362
00:22:59,080 --> 00:23:03,170
Si tuviera esos patrones de bits, ¿cómo podemos hacer para cambiar sólo uno de ellos?

363
00:23:03,170 --> 00:23:07,610
¿Qué ocurre si introducimos en amarillo aquí esta otro patrón de bits?

364
00:23:07,610 --> 00:23:13,420
Si hago las 0s enteros amarillo cadena excepto para el bit que quiero cambiar

365
00:23:13,420 --> 00:23:17,900
y luego introducir un nuevo operador conocido como operador bit a bit -

366
00:23:17,900 --> 00:23:21,210
bit a bit en el sentido de que opera en bits individuales,

367
00:23:21,210 --> 00:23:25,360
no en un byte completo o cuatro bytes de una vez.

368
00:23:25,360 --> 00:23:31,170
Esta barra vertical hay en amarillo sugiere que lo que si se tiene la representación de la mayúscula

369
00:23:31,170 --> 00:23:37,060
y OR bit a bit con la secuencia de bits de color amarillo?

370
00:23:37,060 --> 00:23:41,300
En otras palabras, piensa de nuevo a la discusión de las expresiones booleanas en Scratch y luego en C.

371
00:23:41,300 --> 00:23:47,520
>> Haciendo un booleano o quiere decir que para ser verdad, ya sea la primera cosa que tiene que ser verdad

372
00:23:47,520 --> 00:23:50,700
o la segunda cosa que tiene que ser cierto o ambos tienen que ser verdad,

373
00:23:50,700 --> 00:23:53,270
y luego la salida resultante sí es cierto.

374
00:23:53,270 --> 00:24:00,230
En este caso aquí, ¿qué obtenemos si tomamos 0 "o" ed con 0? Falso o falso?

375
00:24:00,230 --> 00:24:04,280
Todavía es falso, por lo que la minúscula sigue siendo como se esperaba.

376
00:24:04,280 --> 00:24:07,540
¿Y si en vez de eso hacer 1 o 0?

377
00:24:07,540 --> 00:24:12,640
Esto ahora permanece en 1, pero darse cuenta de lo que va a pasar aquí.

378
00:24:12,640 --> 00:24:18,630
Si empezamos con mayúscula y seguimos "o" los bits individuales como estamos haciendo aquí,

379
00:24:18,630 --> 00:24:25,180
0 o el amarillo nos da lo que aquí abajo? Esto nos da 1.

380
00:24:25,180 --> 00:24:35,120
De hecho, supongo que no sabía lo que la versión en mayúsculas de un poco en realidad.

381
00:24:35,120 --> 00:24:38,270
Vamos a hacer esto. Permítanme pasar esto de nuevo por aquí.

382
00:24:38,270 --> 00:24:42,340
Vamos a hacer esto de nuevo. 0 o 0 me da 0.

383
00:24:42,340 --> 00:24:45,020
1 ó 0 me da 1.

384
00:24:45,020 --> 00:24:48,020
0 o 1 me da 1.

385
00:24:48,020 --> 00:24:52,880
0 o 0 me da 0. El siguiente es 0, el siguiente es 0, el siguiente es 0.

386
00:24:52,880 --> 00:24:55,660
1 ó 0 me da 1.

387
00:24:55,660 --> 00:24:59,140
Y así, aunque no sabía de antemano lo que era una minúscula,

388
00:24:59,140 --> 00:25:04,770
simplemente por "o" ing A con este patrón de bits que hemos presentado aquí en amarillo,

389
00:25:04,770 --> 00:25:09,400
puede minúsculas A mayúscula al lanzar esa parte.

390
00:25:09,400 --> 00:25:11,580
Se utilizó esta expresión semanas atrás: apretar un poco.

391
00:25:11,580 --> 00:25:13,710
¿Cómo se puede realmente hacer eso mediante programación?

392
00:25:13,710 --> 00:25:16,390
Se utiliza lo que generalmente se llama una máscara, una secuencia de bits,

393
00:25:16,390 --> 00:25:19,980
que en este caso que pasa a tener este número aquí,

394
00:25:19,980 --> 00:25:22,980
y entonces "o" junto con este nuevo operador C,

395
00:25:22,980 --> 00:25:29,940
no | |, se utiliza un único | y que en realidad tendría esta respuesta aquí, porque ¿por qué?

396
00:25:29,940 --> 00:25:35,120
Este es el lugar 1s, 2s lugar, 16s 4s, 8s, 32s.

397
00:25:35,120 --> 00:25:42,280
Así que resulta que si usted toma una letra mayúscula A y O-lógico con el entero 32,

398
00:25:42,280 --> 00:25:47,520
porque el entero 32, cuando se mire en forma de bits, se ve así,

399
00:25:47,520 --> 00:25:50,860
que significa que usted puede darle la vuelta al poco de que usted realmente desea.

400
00:25:50,860 --> 00:25:52,630
Y del mismo modo - y vamos a ver el código en un momento -

401
00:25:52,630 --> 00:25:54,210
supongamos que queremos ir en otra dirección.

402
00:25:54,210 --> 00:25:58,210
>> ¿Cómo se pasa de minúsculas a capital para A? Qué poco hay que cambiar?

403
00:25:58,210 --> 00:25:59,820
Es el mismo.

404
00:25:59,820 --> 00:26:03,970
Queremos cambiar ese tercer bit desde un 1 a 0.

405
00:26:03,970 --> 00:26:06,310
Y ¿cómo podemos ir haciendo esto?

406
00:26:06,310 --> 00:26:10,130
¿Cómo nos desviamos un poco? ¿Con qué patrón de bits podríamos apagar un poco?

407
00:26:11,580 --> 00:26:14,070
¿Qué pasaría si una especie de invertir la máscara?

408
00:26:14,070 --> 00:26:17,350
Mientras que antes, hemos hecho todo el 0s máscara amarilla

409
00:26:17,350 --> 00:26:19,930
excepto para el bit que queríamos para encender,

410
00:26:19,930 --> 00:26:25,580
¿Y si esta vez, hacemos el 1s máscara entera a excepción de la parte que se desea desactivar

411
00:26:25,580 --> 00:26:28,330
y luego usar lo que operador?

412
00:26:28,330 --> 00:26:30,560
¿Qué pasaría si "y" las cosas? Vamos a echar un vistazo.

413
00:26:30,560 --> 00:26:34,880
Si ahora la vuelta a esto, supongamos que de nuevo puedo crear una máscara que es todo 1s

414
00:26:34,880 --> 00:26:37,650
excepto por el poco uno que desea desactivar

415
00:26:37,650 --> 00:26:43,860
y entonces en lugar de "o" los números blancos encima de la tapa con los números amarillos aquí abajo,

416
00:26:43,860 --> 00:26:46,940
¿Y si en lugar de "y" ellos juntos? Se llama bit a bit y.

417
00:26:46,940 --> 00:26:49,450
Lógicamente, es la misma cosa que un booleano y.

418
00:26:49,450 --> 00:26:55,160
Esto me da 0 y 1 es 0. Así falso y lo verdadero es falso.

419
00:26:55,160 --> 00:26:58,160
Es cierto y verdadero es verdadero.

420
00:26:58,160 --> 00:27:04,020
Y aquí está la magia: Verdadero y falso es falso ahora, así que hemos apagado que poco.

421
00:27:04,020 --> 00:27:06,560
Y ahora el resto de la historia es algo sencillo.

422
00:27:06,560 --> 00:27:11,970
Debido a que el resto de la máscara es de 1 s, no importa lo que los números están en blanco.

423
00:27:11,970 --> 00:27:15,580
Cuando usted "y" algo de verdad, usted no va a cambiar su valor.

424
00:27:15,580 --> 00:27:20,200
Si bien es cierto, seguirá siendo cierto. Si era falso, seguirá siendo falso.

425
00:27:20,200 --> 00:27:23,190
>> Pero la magia sucede cuando se toma algo que era cierto

426
00:27:23,190 --> 00:27:25,430
y luego "y" con falsa.

427
00:27:25,430 --> 00:27:30,030
Esto tiene el efecto de desactivar ese bit.

428
00:27:30,030 --> 00:27:31,980
Así que un poco críptico allí.

429
00:27:31,980 --> 00:27:35,390
Vamos a ver en realidad algo de código, que en realidad podría ser aún más críptico,

430
00:27:35,390 --> 00:27:38,220
pero vamos a echar un vistazo aquí a tolower.

431
00:27:38,220 --> 00:27:45,880
Si miro a tolower, al pasar de mayúscula a minúscula a,

432
00:27:45,880 --> 00:27:47,730
vamos a ver cómo podemos implementar este programa.

433
00:27:47,730 --> 00:27:51,280
Esto es importante, y no está tomando ningún argumento de línea de comandos.

434
00:27:51,280 --> 00:27:55,980
Estoy declarando un carácter c en la carta que el usuario va a escribir pulg

435
00:27:55,980 --> 00:28:00,690
Luego utilizo un do familiarizado bucle while para hacer sólo asegurarse de que el usuario definitivamente me da una A mayúscula

436
00:28:00,690 --> 00:28:05,010
B o C. .. Z, por lo que me da algo entre A y Z.

437
00:28:05,010 --> 00:28:08,580
Y ahora, ¿qué hago yo aquí?

438
00:28:08,580 --> 00:28:14,870
Yo soy "o" ing esto con 0x20, pero que en realidad es el mismo que -

439
00:28:14,870 --> 00:28:19,500
y volveremos a ello en un momento - 32.

440
00:28:19,500 --> 00:28:24,830
Así que de nuevo, 32 es el patrón de bits de aquí. ¿Por qué sabemos esto?

441
00:28:24,830 --> 00:28:26,320
Piense usted en la semana 0.

442
00:28:26,320 --> 00:28:31,010
Este es el lugar 1s, 2s lugar, 4s, 8s, 16s, 32s lugar.

443
00:28:31,010 --> 00:28:33,470
Así que este número amarillo pasa a ser 32.

444
00:28:33,470 --> 00:28:40,570
Luego puede tomar una carta como la charla aquí, bit a bit "o" es literalmente con el número 32,

445
00:28:40,570 --> 00:28:45,250
y ¿qué es lo que yo vuelva? La versión en minúsculas de que char.

446
00:28:45,250 --> 00:28:48,830
Hace un momento, sin embargo, me expresó esto en una notación de base diferente.

447
00:28:48,830 --> 00:28:51,370
¿Qué representa esto? >> [Estudiante] Hexadecimal.

448
00:28:51,370 --> 00:28:53,050
[Malan] Esto le pasa a representar hexadecimal.

449
00:28:53,050 --> 00:28:55,170
No hemos hablado de hexadecimal casi nada,

450
00:28:55,170 --> 00:28:57,330
pero en realidad es conveniente en casos como este.

451
00:28:57,330 --> 00:29:01,730
>> A pesar de que parece más complejo y aunque parece que 20 y no 32,

452
00:29:01,730 --> 00:29:06,240
resulta que en realidad es la notación hexadecimal súper cómodo

453
00:29:06,240 --> 00:29:10,810
porque en hexadecimal cada dígito después del 0x - y esto no significa nada;

454
00:29:10,810 --> 00:29:13,960
esto es sólo convención humana que dice aquí viene un número hexadecimal -

455
00:29:13,960 --> 00:29:18,590
cada uno de estos dígitos, el 2 y luego el 0, se puede representar

456
00:29:18,590 --> 00:29:20,800
con exactamente 4 bits.

457
00:29:20,800 --> 00:29:27,840
Así que si hacemos esto, permítanme abrir un editor de texto aquí - extraño autocomplete -

458
00:29:27,840 --> 00:29:35,940
si hacemos un editor de texto poco aquí, el número 0x20 quiere decir aquí es de 4 bits, aquí hay otros 4 bits.

459
00:29:35,940 --> 00:29:38,050
Vamos a hacer los 4 bits más a la derecha en primer lugar.

460
00:29:38,050 --> 00:29:44,690
0 cuando se representa con 4 bits es lo que? Super fácil. Así todos 0s.

461
00:29:44,690 --> 00:29:46,780
Así que 4 bits como 0.

462
00:29:46,780 --> 00:29:53,510
¿Cómo se puede representar 2? Ha sido un tiempo desde que hice esto, pero es 0100.

463
00:29:53,510 --> 00:29:57,310
Así que este es el lugar 1s, este es el lugar 2s, y entonces no importa lo que los otros lugares son.

464
00:29:57,310 --> 00:30:00,610
En otras palabras, en hexadecimal se podría decir 0x20,

465
00:30:00,610 --> 00:30:04,340
pero si luego pensar en lo que es el 2 y cómo se representan en binario,

466
00:30:04,340 --> 00:30:07,130
¿cuál es el 0 y como se representa en binario,

467
00:30:07,130 --> 00:30:10,440
las respuestas a estas preguntas son esto y lo otro, respectivamente.

468
00:30:10,440 --> 00:30:14,380
Así sucede 0x20 para representar este patrón de 8 bits,

469
00:30:14,380 --> 00:30:16,880
que es precisamente la máscara que queríamos.

470
00:30:16,880 --> 00:30:20,140
Así que esto es por el momento sólo un ejercicio intelectual,

471
00:30:20,140 --> 00:30:24,520
pero la realidad es que en el código es generalmente más común escribir constantes como esta

472
00:30:24,520 --> 00:30:28,360
en hexadecimal porque entonces el programador puede fácilmente relativamente,

473
00:30:28,360 --> 00:30:32,560
incluso si se requiere un poco de papel y un lápiz, averiguar lo que el patrón de bits es

474
00:30:32,560 --> 00:30:35,960
porque uno no puede expresar 0s y 1s normalmente en el código.

475
00:30:35,960 --> 00:30:38,540
No puedes ir a 00010 y así sucesivamente.

476
00:30:38,540 --> 00:30:42,380
>> Tienes que elegir las notaciones decimal o hexadecimal u octal o de otro tipo.

477
00:30:42,380 --> 00:30:47,540
La mayoría de la gente tiende a escoger hexadecimal simplemente para que cada dígito representa 4 bits

478
00:30:47,540 --> 00:30:49,320
y usted puede hacer este cálculo rápido.

479
00:30:49,320 --> 00:30:54,990
Y voy a agitar la mano en toupper, que es casi lo mismo, se ve casi idéntico.

480
00:30:54,990 --> 00:31:01,900
ToUpper pasa a utilizar el operador o no, sino más bien este tipo y df.

481
00:31:01,900 --> 00:31:09,300
¿Qué df representa? df? ¿Alguien? >> [Estudiante] 255.

482
00:31:09,300 --> 00:31:12,780
255? No 255. Eso sería ff.

483
00:31:12,780 --> 00:31:15,210
Vamos a dejar este como un poco de ejercicio.

484
00:31:15,210 --> 00:31:23,460
Pero si usted va de 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 y luego lo que viene después de las 9?

485
00:31:23,460 --> 00:31:26,510
Estamos un poco fuera de dígitos decimales, pero en hexadecimal qué viene después de 9?

486
00:31:26,510 --> 00:31:29,510
[Estudiante] a. Así >> a, b, c, d.

487
00:31:29,510 --> 00:31:33,470
Usted puede calcular a partir de ahí qué patrón de bits d en realidad representa.

488
00:31:33,470 --> 00:31:38,850
Y si hacemos los cálculos, veremos que la máscara se llega a la espalda es idéntica a ésta.

489
00:31:38,850 --> 00:31:45,580
Esto es f, todos los 1, y esto es d. Así df representa esa máscara. Está bien.

490
00:31:45,580 --> 00:31:50,980
Y por último, para no hacer las cosas de sonido super, super técnico,

491
00:31:50,980 --> 00:31:53,840
pero supongamos que queremos escribir un programa que hace esto.

492
00:31:53,840 --> 00:31:58,960
Déjenme seguir adelante y hacer binaria, que es un programa en un archivo llamado binary.c.

493
00:31:58,960 --> 00:32:02,050
Y ahora déjame correr binario y me da un número entero no negativo.

494
00:32:02,050 --> 00:32:03,960
Empecemos fácil y escriba 0.

495
00:32:03,960 --> 00:32:09,010
Esto ahora es un programa que imprime un entero en su representación binaria.

496
00:32:09,010 --> 00:32:13,470
Así que si puedo jugar a este juego de nuevo y escribir en sólo 1, que debería obtener una representación de 32-bit de 1.

497
00:32:13,470 --> 00:32:15,490
Si lo hago de nuevo con 2, me entiendo.

498
00:32:15,490 --> 00:32:19,310
Si lo hago 7, que debería obtener una 1s pocos al final y así sucesivamente.

499
00:32:19,310 --> 00:32:22,740
Resulta que yo menciono porque con operaciones a nivel de bits

500
00:32:22,740 --> 00:32:25,490
en realidad se puede hacer una cosa así.

501
00:32:25,490 --> 00:32:29,130
Puede crear estas máscaras de forma dinámica.

502
00:32:29,130 --> 00:32:32,800
Echa un vistazo a este ejemplo una final que involucre operaciones bit a bit.

503
00:32:32,800 --> 00:32:35,490
Aquí está la primera parte del código, solicitar al usuario un número,

504
00:32:35,490 --> 00:32:38,130
y se insiste en que usted me da un entero no negativo.

505
00:32:38,130 --> 00:32:39,780
Así que es una especie de cosas de la vieja escuela.

506
00:32:39,780 --> 00:32:41,980
Pero aquí hay algo que es bastante interesante.

507
00:32:41,980 --> 00:32:44,910
>> ¿Cómo hago para imprimir un número en binario?

508
00:32:44,910 --> 00:32:48,970
Por primera iteración de qué a qué?

509
00:32:48,970 --> 00:32:52,270
¿Cuál es el tamaño de un int típicamente, al menos en el aparato? >> [Estudiante] 4.

510
00:32:52,270 --> 00:32:57,130
Es 4. Así que 4 * 8 es 32 - 1 es 31.

511
00:32:57,130 --> 00:33:02,590
Así que si yo estoy empezando a contar a partir del 31, que representa, resulta,

512
00:33:02,590 --> 00:33:07,630
sólo conceptualmente, el bit 31 o el bit de orden más alto, que es este chico por aquí,

513
00:33:07,630 --> 00:33:09,650
mientras que esto va a ser de 0 bits.

514
00:33:09,650 --> 00:33:12,850
Así que este es el bit 01 ... bit 31.

515
00:33:12,850 --> 00:33:14,950
Entonces, ¿qué está haciendo este código?

516
00:33:14,950 --> 00:33:20,140
Observe este bucle for, aunque parece críptica, es simplemente iterar desde el 31 hasta 0. Eso es todo.

517
00:33:20,140 --> 00:33:24,530
Así que la parte interesante ahora debe estar en estas 5 líneas aquí.

518
00:33:24,530 --> 00:33:28,110
Nótese que en esta línea estoy declarando una variable llamada máscara

519
00:33:28,110 --> 00:33:30,790
para ser coherente con nuestra historia de estos números amarillos.

520
00:33:30,790 --> 00:33:32,200
Y entonces, ¿qué hace esto?

521
00:33:32,200 --> 00:33:35,720
Este es otro operador de bits que no hemos visto antes, lo más probable.

522
00:33:35,720 --> 00:33:38,300
Es el operador de desplazamiento a la izquierda.

523
00:33:38,300 --> 00:33:40,060
Este operador hace esto.

524
00:33:40,060 --> 00:33:44,920
Aquí está el número 1, y si lo haces me fui turno, desviación a la izquierda,

525
00:33:44,920 --> 00:33:49,260
¿qué piensa usted que tiene el efecto de hacer a esa persona 1?

526
00:33:49,260 --> 00:33:51,290
Literalmente cambiando otra vez.

527
00:33:51,290 --> 00:33:57,540
Así que si el número 1 es lo que tiene a la izquierda y comienza inicializando i al 31,

528
00:33:57,540 --> 00:34:03,490
lo que vamos a hacer? Va a tomar este número 1 y cambiarlo 31 plazas por aquí.

529
00:34:03,490 --> 00:34:06,210
Y porque obviamente hay ningún otro dígito detrás de él,

530
00:34:06,210 --> 00:34:10,350
los que por defecto serán reemplazados por 0.

531
00:34:10,350 --> 00:34:15,120
Por lo que usted comience con el número 1, que por supuesto tiene este aspecto -

532
00:34:15,120 --> 00:34:18,659
y déjame llamar aquí en el centro.

533
00:34:18,659 --> 00:34:22,139
Y luego, a medida que cambian las cosas a la izquierda, este hombre esencialmente va de esta manera.

534
00:34:22,139 --> 00:34:24,659
Pero tan pronto como lo hace, un 0 se llena pulg

535
00:34:24,659 --> 00:34:28,360
Si lo cambian por segunda vez, va de un lado a otro 0 se llena pulg

536
00:34:28,360 --> 00:34:31,000
>> Usted lo cambie de nuevo y luego otro 0 se llena pulg

537
00:34:31,000 --> 00:34:37,900
Así que si usted hace esta cosa de 1 << i 31 plazas, se llega a una máscara

538
00:34:37,900 --> 00:34:42,550
que es 32 caracteres de longitud, más a la izquierda de la que es un 1,

539
00:34:42,550 --> 00:34:45,199
todo el resto de los cuales son un 0.

540
00:34:45,199 --> 00:34:50,880
Y resulta que, en un aparte, cambiando un número a la izquierda como éste

541
00:34:50,880 --> 00:34:53,530
también por casualidad, ya veces conveniente,

542
00:34:53,530 --> 00:34:57,520
tiene el efecto de hacer lo que a ese número? >> [Estudiante] duplicarlo.

543
00:34:57,520 --> 00:35:00,980
Duplicar porque cada una de las columnas - el lugar 1s, 2s lugar, lugar 4s,

544
00:35:00,980 --> 00:35:05,030
Lugar 8s, 16s lugar - son todos duplicación a medida que avanza hacia la izquierda.

545
00:35:05,030 --> 00:35:09,500
O más bien, al cambiar el 1s vas a terminar duplicando el valor del número.

546
00:35:09,500 --> 00:35:12,070
Usted puede terminar encima de hacer transformaciones interesantes de dígitos

547
00:35:12,070 --> 00:35:15,640
sobre todo al cambiar de esta manera por potencias de 2.

548
00:35:15,640 --> 00:35:17,150
Entonces, ¿cómo funciona esto?

549
00:35:17,150 --> 00:35:22,580
Esto entonces me da una máscara que es de todos 0s a excepción de una en una, precisamente el lugar en el que lo quiere,

550
00:35:22,580 --> 00:35:27,920
y entonces esta expresión, que es robado de toupper.c,

551
00:35:27,920 --> 00:35:31,770
está diciendo simplemente tomar el número n de que el usuario escribió,

552
00:35:31,770 --> 00:35:34,730
"Y que" con esa máscara, y lo que vas a conseguir?

553
00:35:34,730 --> 00:35:39,200
Usted va a obtener un 1 si hay un 1 en ese lugar enmascarado,

554
00:35:39,200 --> 00:35:41,570
o usted va a obtener un 0 si no lo es.

555
00:35:41,570 --> 00:35:44,370
Y así todo el programa de manera efectiva es que tiene un bucle,

556
00:35:44,370 --> 00:35:48,340
y crea una máscara con un 1 por aquí, luego un 1 por aquí, luego un 1 por aquí,

557
00:35:48,340 --> 00:35:52,950
y utiliza este truco AND bit a bit a decir es que hay un bit 1 en la entrada del usuario en esta lista?

558
00:35:52,950 --> 00:35:59,220
>> ¿Hay un bit 1 en la entrada del usuario aquí? Y si es así, literalmente imprimir 1, de lo contrario imprimir 0.

559
00:35:59,220 --> 00:36:03,780
Estamos haciendo esto con ints sólo porque es por eso que estamos haciendo 32 bits en lugar de 8,

560
00:36:03,780 --> 00:36:06,900
pero lo que hemos introducido es éste AND bit a bit, bit a bit OR esto,

561
00:36:06,900 --> 00:36:10,450
y este operador de desplazamiento a la izquierda, que no suelen ser terriblemente útil,

562
00:36:10,450 --> 00:36:12,230
pero resulta que puede ser.

563
00:36:12,230 --> 00:36:16,560
De hecho, si usted fuera a representar algo así como un conjunto de valores booleanos

564
00:36:16,560 --> 00:36:21,260
sólo para representar verdaderas o falsas, suponga que desea hacer un seguimiento de si es o no

565
00:36:21,260 --> 00:36:24,630
una habitación llena de 300 estudiantes está presente,

566
00:36:24,630 --> 00:36:29,420
puede declarar una matriz de tamaño 300 de tipo bool para que usted obtenga 300 Bools,

567
00:36:29,420 --> 00:36:33,090
y se puede configurar para cada cierto si alguien está aquí y false en caso contrario.

568
00:36:33,090 --> 00:36:37,550
¿Por qué es que la representación en esa estructura de datos ineficiente?

569
00:36:39,370 --> 00:36:44,800
¿Qué hay de malo en el diseño de esa estructura de datos, una matriz de 300 Bools?

570
00:36:46,190 --> 00:36:49,600
¿Qué es un bool, de hecho, debajo de la capucha?

571
00:36:49,600 --> 00:36:52,310
Esto, también, es algo que no puede ser conocido.

572
00:36:52,310 --> 00:36:53,720
Resulta que no hay bool.

573
00:36:53,720 --> 00:36:56,620
Recuerde que tipo de creado que con el archivo cs50.h,

574
00:36:56,620 --> 00:36:58,630
que se incluye de serie bool.

575
00:36:58,630 --> 00:37:00,930
C es un poco tonto, sin embargo, cuando se trata de bool.

576
00:37:00,930 --> 00:37:04,880
Se utiliza 8 bits para representar cada bool, que es totalmente antieconómico

577
00:37:04,880 --> 00:37:09,040
porque, obviamente, ¿cuántos bits se necesita para representar un bool? A sólo 1.

578
00:37:09,040 --> 00:37:13,190
Así que resulta que si usted ahora tiene la capacidad de los operadores a nivel de bits

579
00:37:13,190 --> 00:37:17,760
para manipular bits individuales, incluso en un char, incluso en un solo byte,

580
00:37:17,760 --> 00:37:21,380
resulta que podría reducir la memoria necesaria para representar algo estúpido

581
00:37:21,380 --> 00:37:25,490
como la estructura de los datos de asistencia labrado por un factor de 8.

582
00:37:25,490 --> 00:37:29,820
En vez de usar ocho bits para representar verdaderas o falsas, que, literalmente, podría utilizar un

583
00:37:29,820 --> 00:37:34,500
mediante el uso de un solo byte por cada ocho alumnos de la clase

584
00:37:34,500 --> 00:37:41,990
y alternar 0 a 1 los bits individuales utilizando este tipo de bajo nivel trucos.

585
00:37:43,850 --> 00:37:49,460
Eso realmente poner fin a la energía. ¿Hay alguna pregunta acerca de las operaciones a nivel de bits?

586
00:37:49,460 --> 00:37:52,710
>> Si. >> [Estudiante] ¿Existe un operador exclusivo o?

587
00:37:52,710 --> 00:37:56,440
Sí. Hay un operador exclusivo o que se parece a esto, ^, el símbolo de la zanahoria,

588
00:37:56,440 --> 00:38:02,070
lo que significa que sólo es lo primero o lo segundo puede ser un 1 para que la salida sea un 1.

589
00:38:02,070 --> 00:38:07,750
También hay un no, ~, lo que le permitirá invertir un 0 a un 1 o viceversa, así.

590
00:38:07,750 --> 00:38:11,600
Y también hay un operador de desplazamiento a la derecha, >>, que es lo contrario de la que vimos.

591
00:38:11,600 --> 00:38:13,850
Está bien. Vamos a tomar las cosas ahora a un nivel más alto.

592
00:38:13,850 --> 00:38:16,770
Empezamos hablando de texto y luego comprimir

593
00:38:16,770 --> 00:38:19,650
y que representa el texto con un número menor de bits;

594
00:38:19,650 --> 00:38:22,890
hablamos un poco acerca de cómo podemos empezar a manipular las cosas a un nivel de bit a bit.

595
00:38:22,890 --> 00:38:26,640
Vamos ahora amplía hasta 10.000 pies a la representación

596
00:38:26,640 --> 00:38:29,250
de las cosas más complejas, como gráficos.

597
00:38:29,250 --> 00:38:32,950
Aquí tenemos una bandera de Alemania, aquí tenemos uno de Francia.

598
00:38:32,950 --> 00:38:36,350
Estos pueden ser representados en formatos de archivo que puede saber - GIF, por ejemplo.

599
00:38:36,350 --> 00:38:40,030
Si alguna vez has visto una imagen en la Web que termina en. Gif,

600
00:38:40,030 --> 00:38:43,000
Este es un formato de intercambio de gráficos.

601
00:38:43,000 --> 00:38:47,530
Estas dos banderas especie de aquí se prestan a la compresión

602
00:38:47,530 --> 00:38:52,050
por lo que tal vez obvia razón? >> [Respuesta de los estudiantes inaudible]

603
00:38:52,050 --> 00:38:53,440
Hay un montón de repetición, ¿no?

604
00:38:53,440 --> 00:38:57,270
Para enviar bandera de Alemania, piensa en esto como una imagen en la pantalla

605
00:38:57,270 --> 00:38:59,030
En la época de su Scratch.

606
00:38:59,030 --> 00:39:02,380
Usted recordará que hay píxeles individuales o puntos que componen una imagen.

607
00:39:02,380 --> 00:39:06,650
>> Hay toda una fila de puntos negros y otro conjunto de filas de puntos negros.

608
00:39:06,650 --> 00:39:10,110
Hay un montón de filas de puntos negros que podríamos ver si realmente el zoom,

609
00:39:10,110 --> 00:39:13,370
tanto como cuando el zoom en la cara de Rob en Photoshop.

610
00:39:13,370 --> 00:39:15,500
Tan pronto como llegamos más y más y más profundo en la imagen,

611
00:39:15,500 --> 00:39:19,990
que comenzó a ver la pixelación, todos los cuadrados que componen el ojo en ese caso.

612
00:39:19,990 --> 00:39:24,130
Lo mismo pasa aquí. Si el zoom un poco, verá puntos individuales.

613
00:39:24,130 --> 00:39:27,110
Bueno, esto es un poco un desperdicio de bits.

614
00:39:27,110 --> 00:39:32,120
Si un tercio de la bandera es de color negro y un tercio de la bandera es de color amarillo y así sucesivamente,

615
00:39:32,120 --> 00:39:34,860
¿por qué no podemos comprimir de alguna manera esta bandera?

616
00:39:34,860 --> 00:39:39,560
E incluso la bandera francesa puede ser comprimido a pesar de que el patrón es un poco diferente.

617
00:39:39,560 --> 00:39:44,120
Resulta que el formato de archivo GIF es un formato de compresión sin pérdida,

618
00:39:44,120 --> 00:39:48,420
lo que significa que usted puede tomar una imagen como la bandera alemana aquí,

619
00:39:48,420 --> 00:39:53,540
usted puede tirar mucho de sus bits sin sacrificar la calidad.

620
00:39:53,540 --> 00:39:55,340
Esto está en contraste con algo como JPEG,

621
00:39:55,340 --> 00:39:57,050
con la que la mayoría de nosotros somos probablemente más familiar.

622
00:39:57,050 --> 00:39:59,000
Fotos de Facebook y Flickr fotos y similares

623
00:39:59,000 --> 00:40:02,200
casi siempre se guardan como archivos JPEG cuando están cargados,

624
00:40:02,200 --> 00:40:08,100
pero es una pérdida JPEG - formato mediante el cual usted se deshaga de bits - con pérdidas

625
00:40:08,100 --> 00:40:10,430
pero también tiro de calidad.

626
00:40:10,430 --> 00:40:13,890
Y así, si comprime las fotos con Photoshop o subirlas a Facebook

627
00:40:13,890 --> 00:40:15,580
o llevarlos a un teléfono realmente horrible,

628
00:40:15,580 --> 00:40:19,510
usted sabe que la imagen empieza a ser muy desiguales y pixelado,

629
00:40:19,510 --> 00:40:22,290
y eso es porque está siendo comprimido por el ordenador o por teléfono

630
00:40:22,290 --> 00:40:24,550
por, literalmente, tirar información de distancia.

631
00:40:24,550 --> 00:40:28,500
Pero GIF es sorprendente, ya que puede utilizar menos bits de lo que podría por defecto

632
00:40:28,500 --> 00:40:30,750
sin perder ninguna información.

633
00:40:30,750 --> 00:40:32,410
>> Y es esencialmente lo hace como sigue.

634
00:40:32,410 --> 00:40:38,740
En lugar de almacenar en un archivo como un archivo BMP haría un triple RGB para el negro, negro, negro, negro,

635
00:40:38,740 --> 00:40:42,570
negro, negro, negro, negro, negro, negro, negro, negro y así sucesivamente,

636
00:40:42,570 --> 00:40:45,640
más bien, el formato GIF se va a decir, "Negro"

637
00:40:45,640 --> 00:40:48,330
y luego, "Repita esto 100 veces", o algo por el estilo.

638
00:40:48,330 --> 00:40:52,280
"Negro, repetir esto 100 veces, negro, repetir esto 100 veces ..."

639
00:40:52,280 --> 00:40:54,530
"Amarillo, repetir esto 100 veces."

640
00:40:54,530 --> 00:40:57,200
Y así lo recuerda, esencialmente, el píxel más a la izquierda

641
00:40:57,200 --> 00:41:02,160
y luego codifica de alguna manera la noción de repetir ese píxel y otra vez.

642
00:41:02,160 --> 00:41:06,110
Así GIFs entonces pueden comprimir sin perder ninguna información.

643
00:41:06,110 --> 00:41:09,510
Pero si tuviera que adivinar, si ese es el algoritmo que GIFS uso,

644
00:41:09,510 --> 00:41:13,180
que de estos indicadores, a pesar de que son idénticas en tamaño,

645
00:41:13,180 --> 00:41:19,620
va a ser menor cuando se guarda en el disco como un GIF? >> [Estudiante] Alemania.

646
00:41:19,620 --> 00:41:21,660
Alemania va a ser más pequeño? ¿Por qué?

647
00:41:21,660 --> 00:41:26,620
[Estudiante] Porque te lo repiten muchas, muchas veces horizontalmente

648
00:41:26,620 --> 00:41:29,010
y luego repetir en otra ocasión. >> Exactamente.

649
00:41:29,010 --> 00:41:32,020
Porque la gente que inventó GIF sólo tipo de arbitrariamente decidió

650
00:41:32,020 --> 00:41:36,040
que la repetición será aprovechado horizontal y lateralmente no.

651
00:41:36,040 --> 00:41:40,900
No hay repetición mucho más lateralmente aquí en el pabellón alemán de la bandera francesa.

652
00:41:40,900 --> 00:41:44,430
Así que si realmente abrir una carpeta en mi disco duro que tiene estos GIFs,

653
00:41:44,430 --> 00:41:51,920
en realidad se puede ver que la bandera alemana aquí es de 2 kilobytes y el francés es de 4 kilobytes.

654
00:41:51,920 --> 00:41:54,080
Le pasa a ser una coincidencia que uno es el doble de la otra,

655
00:41:54,080 --> 00:41:57,960
pero es de hecho el caso de que la bandera francesa es mucho más grande.

656
00:41:57,960 --> 00:42:01,250
>> A pesar de que estamos hablando aquí acerca de los gráficos, las mismas ideas pueden aplicarse a

657
00:42:01,250 --> 00:42:05,150
no cosas como banderas sino imágenes que son un poco más complejas.

658
00:42:05,150 --> 00:42:08,170
Si se toma una fotografía de una manzana, seguro que hay un montón de duplicación allí,

659
00:42:08,170 --> 00:42:11,040
por lo que de alguna manera podría recordar que el fondo predeterminado es azul

660
00:42:11,040 --> 00:42:13,230
y no, como la imagen de la derecha indica,

661
00:42:13,230 --> 00:42:16,830
Hay que recordar que el color de cada píxel en la imagen.

662
00:42:16,830 --> 00:42:21,060
Así que podemos tirar trozos de distancia sin perder información.

663
00:42:21,060 --> 00:42:23,340
La manzana sigue pareciendo lo mismo.

664
00:42:23,340 --> 00:42:27,510
En este ejemplo aquí, puede ver lo que sucede en una película.

665
00:42:27,510 --> 00:42:31,970
Estos representan la vieja escuela rollos de película por lo que en la imagen de arriba hay

666
00:42:31,970 --> 00:42:36,900
Tiene una conducción RV pasado una casa y un árbol.

667
00:42:36,900 --> 00:42:42,130
Y como que van conduce más allá de izquierda a derecha, lo que, evidentemente, no está cambiando?

668
00:42:42,130 --> 00:42:45,320
La casa no va a ninguna parte, y el árbol no va a ninguna parte.

669
00:42:45,320 --> 00:42:47,700
Lo único que se mueve es la furgoneta en este caso.

670
00:42:47,700 --> 00:42:51,650
Así como fondo Sin cambios indica, lo que puede hacer en las películas

671
00:42:51,650 --> 00:42:56,530
es igualmente justo desechar la información que no cambia entre fotogramas.

672
00:42:56,530 --> 00:42:58,900
Esto se conoce generalmente como la compresión intertrama

673
00:42:58,900 --> 00:43:02,120
por lo que si esta estructura se ve casi idéntico a éste,

674
00:43:02,120 --> 00:43:05,390
no hay que preocuparse almacenamiento en disco de la información idéntica

675
00:43:05,390 --> 00:43:09,250
en estos cuadros intermedios, vamos a utilizar fotogramas clave sólo de vez en cuando

676
00:43:09,250 --> 00:43:13,420
que en realidad almacenar esa información redundante así como un poco de cordura comprobar.

677
00:43:13,420 --> 00:43:18,620
>> Por el contrario, otro enfoque para la compresión de vídeo es en este ejemplo y segunda más baja aquí,

678
00:43:18,620 --> 00:43:23,970
donde en lugar de almacenar 30 imágenes, ¿por qué no acaba de almacenar 15 imágenes por segundo en su lugar?

679
00:43:23,970 --> 00:43:27,070
Más que el tipo de película que fluye muy bien, perfectamente,

680
00:43:27,070 --> 00:43:30,060
puede ser que parezca que está tartamudeando un poco, un poco de la vieja escuela,

681
00:43:30,060 --> 00:43:37,190
pero el efecto neto será utilizar bits de un número mucho menor de lo que podría ser necesaria.

682
00:43:37,190 --> 00:43:39,240
Entonces, ¿dónde nos deja esto entonces?

683
00:43:39,240 --> 00:43:41,700
Eso fue un poco de un lado a otro donde se puede ir con la compresión.

684
00:43:41,700 --> 00:43:45,140
Para saber más sobre eso, tome una clase como CS175 aquí.

685
00:43:45,140 --> 00:43:46,990
Aquí hay otro ejemplo en video.

686
00:43:46,990 --> 00:43:49,190
Si la abeja es la única cosa en movimiento,

687
00:43:49,190 --> 00:43:51,790
realmente se puede desechar la información en los cuadros medios

688
00:43:51,790 --> 00:43:55,260
porque la flor y el cielo y las hojas no están cambiando.

689
00:43:55,260 --> 00:43:57,960
Pero vamos a considerar ahora una última cosa.

690
00:43:57,960 --> 00:44:03,890
En los próximos 5 minutos, dejar atrás para siempre C en clase? Sí. No en los conjuntos de procesadores, sin embargo.

691
00:44:03,890 --> 00:44:10,210
Última historia sobre C y luego llegamos a cosas muy sexy

692
00:44:10,210 --> 00:44:13,870
participación de HTML y Web y woo hoo. Está bien.

693
00:44:13,870 --> 00:44:16,050
Aquí vamos. Esa es la motivación.

694
00:44:16,050 --> 00:44:20,020
Resulta que todo este tiempo en que hemos estado escribiendo programas que se ejecutan Clang.

695
00:44:20,020 --> 00:44:23,890
Y Clang, hemos dicho desde la primera semana más o menos, tiene el código fuente

696
00:44:23,890 --> 00:44:25,740
y lo convierte en un código objeto.

697
00:44:25,740 --> 00:44:28,540
Se tarda C y la convierte en 0 y 1.

698
00:44:28,540 --> 00:44:32,150
He especie de estado mintiendo durante unas semanas, ya que no es tan simple como eso.

699
00:44:32,150 --> 00:44:36,750
>> Hay muchas más cosas debajo de la capucha cuando se ejecuta un programa como Clang.

700
00:44:36,750 --> 00:44:39,560
De hecho, el proceso de compilación de un programa realmente puede ser resumida,

701
00:44:39,560 --> 00:44:42,210
Como se puede recordar de vídeo de Rob en compiladores,

702
00:44:42,210 --> 00:44:47,580
en estos 4 pasos: pre-procesamiento, elaboración propia, el montaje y la vinculación.

703
00:44:47,580 --> 00:44:51,950
Pero en la clase y la mayoría de las personas en el mundo típicamente resumir todos estos pasos

704
00:44:51,950 --> 00:44:54,410
simplemente como "compilar".

705
00:44:54,410 --> 00:44:58,070
Pero si empezamos con el código fuente de este tipo, recuerdo este es quizás el programa más simple C

706
00:44:58,070 --> 00:45:03,530
que hemos escrito hasta ahora, recordemos que cuando se compila termina pareciéndose a esto.

707
00:45:03,530 --> 00:45:07,310
Pero en realidad hay un paso intermedio, y los pasos son los siguientes.

708
00:45:07,310 --> 00:45:10,750
En primer lugar hay una cosa en la parte superior de esta y la mayoría de nuestros programas,

709
00:45:10,750 --> 00:45:13,550
# Include

710
00:45:13,550 --> 00:45:17,210
¿Qué es # include hacer por nosotros?

711
00:45:17,210 --> 00:45:24,150
Es más o menos copias y pega el contenido del archivo stdio.h en mi para que ¿por qué?

712
00:45:24,150 --> 00:45:27,220
¿Por qué se preocupan por el contenido de stdio.h? ¿Qué hay ahí de interés?

713
00:45:27,220 --> 00:45:32,310
Printf la declaración, su prototipo, por lo que el compilador sabe a qué me refiero

714
00:45:32,310 --> 00:45:34,900
cuando menciono esta función printf.

715
00:45:34,900 --> 00:45:39,390
Así que el paso 1 en la compilación es pre-procesamiento, por lo que un programa como Clang

716
00:45:39,390 --> 00:45:43,450
o algún programa de ayuda que viene con Clang lee el código de arriba a abajo,

717
00:45:43,450 --> 00:45:47,740
izquierda a derecha, y cada vez que ve un símbolo # seguido de una palabra clave como include,

718
00:45:47,740 --> 00:45:53,980
realiza esta operación, copiar y pegar en este caso stdio.h en su archivo.

719
00:45:53,980 --> 00:45:55,510
Ese es el paso 1.

720
00:45:55,510 --> 00:45:59,620
Entonces usted tiene una mucho más grande archivo de C debido a la gran copia, pega trabajo que acaba de pasar.

721
00:45:59,620 --> 00:46:01,710
>> 2 Paso ahora está compilando.

722
00:46:01,710 --> 00:46:04,880
Pero resulta que lleva compilar el código fuente que se ve así

723
00:46:04,880 --> 00:46:08,160
y se convierte en algo que se parece a esto,

724
00:46:08,160 --> 00:46:12,560
que para aquellos que están familiarizados se llama? >> [Estudiante] Asamblea. Idioma >> Asamblea.

725
00:46:12,560 --> 00:46:16,700
Esto es realmente algo si se toma CS61 podrás sumergirte en en más detalle.

726
00:46:16,700 --> 00:46:22,380
Esto es lo más cercano que se puede llegar a escribir 0s y 1s usted mismo

727
00:46:22,380 --> 00:46:25,850
pero escribir las cosas de tal manera que aun hace por lo menos un poco de sentido.

728
00:46:25,850 --> 00:46:30,760
Estas son las instrucciones de la máquina, y si desplácese hacia abajo a la función principal aquí,

729
00:46:30,760 --> 00:46:35,470
cuenta de que existe esta instrucción de inserción, mueva la instrucción, restar instrucción,

730
00:46:35,470 --> 00:46:38,550
llamar a la instrucción, y así sucesivamente.

731
00:46:38,550 --> 00:46:42,930
Cuando usted oye que el equipo tiene Intel en el interior,

732
00:46:42,930 --> 00:46:46,180
usted tiene una CPU Intel en su Mac o PC, ¿qué significa eso?

733
00:46:46,180 --> 00:46:51,200
Una CPU viene integrado por empresas como Intel entender ciertas instrucciones.

734
00:46:51,200 --> 00:46:55,770
No tienen idea de lo que son las funciones tales como el canje o principal están per se,

735
00:46:55,770 --> 00:47:00,060
pero sé lo muy bajo nivel instrucciones como sumar, restar, empujar,

736
00:47:00,060 --> 00:47:02,430
moverse, llamar, y así sucesivamente son.

737
00:47:02,430 --> 00:47:06,170
Así que cuando se compila código C en lenguaje ensamblador,

738
00:47:06,170 --> 00:47:11,820
su muy fácil de usar con aspecto de códigos se convierte en algo que se parece a esto,

739
00:47:11,820 --> 00:47:21,670
que literalmente se mueve bytes o 4 bytes en torno a estas pequeñas unidades de entrada y salida de la CPU.

740
00:47:21,670 --> 00:47:26,820
Pero finalmente, cuando Clang está dispuesta a asumir esta representación de su programa

741
00:47:26,820 --> 00:47:30,940
en 0 y 1, entonces el paso se llama montaje sucede,

742
00:47:30,940 --> 00:47:33,850
y esta vez todo sucede en un abrir y cerrar de ojos cuando se ejecuta Clang.

743
00:47:33,850 --> 00:47:39,300
Empezamos aquí, envía un archivo como este, y luego lo convierte a estos 0s y 1s.

744
00:47:39,300 --> 00:47:42,000
Y si quiere volver en algún momento y en realidad ver esto en acción,

745
00:47:42,000 --> 00:47:48,220
si voy a hello1.c--este es uno de los primeros programas que vimos -

746
00:47:48,220 --> 00:47:53,710
normalmente queremos compilar este con hello1.c Clang y esto nos daría a.out.

747
00:47:53,710 --> 00:47:59,890
Si por el contrario en su lugar darle la opción-S, lo que se obtiene es hello1.s

748
00:47:59,890 --> 00:48:02,750
y que realmente va a ver el lenguaje ensamblador.

749
00:48:02,750 --> 00:48:05,750
>> Estoy haciendo esto por un programa muy corto, pero si vuelves por Scramble

750
00:48:05,750 --> 00:48:08,740
o Recuperar o cualquier programa que usted ha escrito y sólo por curiosidad

751
00:48:08,740 --> 00:48:13,240
quieren ver lo que realmente parece, lo que en realidad se alimenta a la CPU,

752
00:48:13,240 --> 00:48:15,700
puede utilizar esa opción-S con Clang.

753
00:48:15,700 --> 00:48:17,770
Pero entonces, por último, todavía hay un gotcha.

754
00:48:17,770 --> 00:48:21,810
Éstos son el 0 y 1 que representa mi implementación de hola, mundo.

755
00:48:21,810 --> 00:48:25,530
Pero he utilizado de otra persona en función de mi programa.

756
00:48:25,530 --> 00:48:28,710
Así que, aunque el proceso ha sido tomo hello.c,

757
00:48:28,710 --> 00:48:34,280
que se compila en código ensamblador, y luego se ensamblan en 0s y 1s,

758
00:48:34,280 --> 00:48:37,460
el único 0s y 1s que se generan en este punto en el tiempo

759
00:48:37,460 --> 00:48:40,270
son las que resultan de mi código.

760
00:48:40,270 --> 00:48:44,400
Pero la persona que escribió printf, que compila su código hace 20 años

761
00:48:44,400 --> 00:48:47,000
y está ahora instalado en algún lugar en el aparato,

762
00:48:47,000 --> 00:48:51,610
por lo que de alguna manera tiene que combinar sus 0s y 1s con mi 0s y 1s,

763
00:48:51,610 --> 00:48:56,160
y que nos lleva a la cuarta y última etapa de compilación, conocida como la vinculación.

764
00:48:56,160 --> 00:48:58,680
Así que en el lado izquierdo tenemos la misma imagen exacta como antes:

765
00:48:58,680 --> 00:49:02,580
hello.c se convierte en código ensamblador convierte en 0s y 1s.

766
00:49:02,580 --> 00:49:05,960
Pero recordemos que he utilizado el estándar de E / S de la biblioteca en mi código,

767
00:49:05,960 --> 00:49:10,350
y eso significa que en algún lugar en el equipo hay un archivo llamado stdio.c

768
00:49:10,350 --> 00:49:13,980
o por lo menos la versión compilada de los mismos porque alguien hace algunos años

769
00:49:13,980 --> 00:49:18,530
compilado stdio.c en código ensamblador y luego un montón de 0s y 1s.

770
00:49:18,530 --> 00:49:21,130
Esto es lo que se conoce como estática o una biblioteca dinámica.

771
00:49:21,130 --> 00:49:23,350
Es algún archivo que se sienta en algún lugar del aparato.

772
00:49:23,350 --> 00:49:28,710
>> Pero, por último, tengo que llevar a mi 0s y 1s y esa persona 0s y 1s

773
00:49:28,710 --> 00:49:32,760
y de alguna manera ellos se unen, literalmente combinar los 0s y 1s

774
00:49:32,760 --> 00:49:37,900
en un solo archivo llamado a.out o hello1 o lo que llamé a mi programa

775
00:49:37,900 --> 00:49:43,320
de modo que el resultado final tiene todos los 1s y 0s que debe componen mi programa.

776
00:49:43,320 --> 00:49:45,660
Así que todo este tiempo este semestre cuando usted ha estado usando Clang

777
00:49:45,660 --> 00:49:48,750
y más recientemente de ejecutar make para ejecutar Clang,

778
00:49:48,750 --> 00:49:53,580
todos estos pasos se han ido sucediendo una especie de instantánea pero muy deliberadamente.

779
00:49:53,580 --> 00:49:57,830
Y así, si continúa en ciencias de la computación, es decir, CS61,

780
00:49:57,830 --> 00:50:00,850
esta es la capa que usted continuará pelar fuera de allí

781
00:50:00,850 --> 00:50:06,980
habla de eficiencia, implicaciones de seguridad, y similares de estos detalles de nivel inferior.

782
00:50:06,980 --> 00:50:09,220
Pero con eso, estamos a punto de dejar atrás C.

783
00:50:09,220 --> 00:50:11,420
Vamos a seguir adelante y tomar nuestro hijo de 5 minutos de descanso ahora,

784
00:50:11,420 --> 00:50:14,190
y cuando volvamos: la Internet.

785
00:50:17,280 --> 00:50:19,170
Está bien. Estamos de vuelta.

786
00:50:19,170 --> 00:50:23,590
Ahora comenzamos nuestra mirada no sólo en HTML, ya que, como se verá,

787
00:50:23,590 --> 00:50:26,050
HTML en sí mismo es realmente muy simple

788
00:50:26,050 --> 00:50:29,270
pero realmente en la programación web en general, la creación de redes en general,

789
00:50:29,270 --> 00:50:31,770
y cómo todas estas tecnologías se unen

790
00:50:31,770 --> 00:50:35,400
que nos permita crear programas mucho más sofisticadas sobre el Internet

791
00:50:35,400 --> 00:50:38,690
que hasta ahora hemos podido en estas ventanas en blanco y negro.

792
00:50:38,690 --> 00:50:42,140
De hecho, en este punto en el semestre a pesar de que pasará un tiempo relativamente menos

793
00:50:42,140 --> 00:50:46,200
en PHP, HTML, CSS, JavaScript, SQL y más,

794
00:50:46,200 --> 00:50:48,480
mayoría de los estudiantes terminan haciendo trabajos finales que son basado en la web

795
00:50:48,480 --> 00:50:51,230
porque, como se verá, el fondo que ahora tenemos en C

796
00:50:51,230 --> 00:50:54,450
es muy aplicable a estos lenguajes de alto nivel.

797
00:50:54,450 --> 00:50:56,800
>> Y a medida que empiezas a pensar en su proyecto final,

798
00:50:56,800 --> 00:50:59,940
que, al igual que 0 Serie de problemas, donde se alentó

799
00:50:59,940 --> 00:51:02,160
para hacer casi cualquier cosa de su interés en Scratch,

800
00:51:02,160 --> 00:51:05,790
El proyecto final es tu oportunidad de tomar su nuevo conocimiento y comprensión con C

801
00:51:05,790 --> 00:51:09,850
o PHP o JavaScript o similar para dar una vuelta

802
00:51:09,850 --> 00:51:12,330
y crear su propio pedazo de software para que el mundo vea.

803
00:51:12,330 --> 00:51:17,770
Y a las semillas que con ideas, saber que puedes ir aquí, projects.cs50.net.

804
00:51:17,770 --> 00:51:21,800
Cada año, solicitar ideas de los profesores y el personal y grupos de estudiantes en el campus

805
00:51:21,800 --> 00:51:27,330
sólo para que presenten sus ideas para cosas interesantes que podrían ser resueltos utilizando las computadoras,

806
00:51:27,330 --> 00:51:29,860
uso de sitios web, utilizando el software.

807
00:51:29,860 --> 00:51:32,360
Así que si usted está luchando para llegar a una idea propia,

808
00:51:32,360 --> 00:51:35,790
por todos los medios desplazarse a través de las ideas allí desde este año y el pasado.

809
00:51:35,790 --> 00:51:39,990
Está perfectamente bien para hacer frente a un proyecto que ha sido abordado antes.

810
00:51:39,990 --> 00:51:44,540
Hemos visto muchas de las aplicaciones para ver el estado de lavandería en el campus,

811
00:51:44,540 --> 00:51:47,000
muchas de las aplicaciones para navegar por el menú del comedor,

812
00:51:47,000 --> 00:51:49,540
muchas de las aplicaciones de la navegación por el catálogo de cursos y similares.

813
00:51:49,540 --> 00:51:53,680
Y, en efecto, en una conferencia futuro y en futuros seminarios,

814
00:51:53,680 --> 00:51:57,750
que le dará a conocer algunas API a disposición del público, tanto comercialmente disponible

815
00:51:57,750 --> 00:52:02,520
así como aquí CS50 disponible en el plantel para que tenga acceso a los datos

816
00:52:02,520 --> 00:52:04,910
y entonces puede hacer cosas interesantes con él.

817
00:52:04,910 --> 00:52:09,380
Así que más sobre los proyectos finales en pocos días cuando soltamos el pliego de condiciones,

818
00:52:09,380 --> 00:52:12,990
pero por ahora, saber que se puede trabajar solo o con uno o dos amigos

819
00:52:12,990 --> 00:52:16,010
en la mayoría de cualquier proyecto de su interés.

820
00:52:16,010 --> 00:52:18,080
La Internet.

821
00:52:18,080 --> 00:52:22,300
Ve y saca su laptop, usted va a facebook.com, por primera vez,

822
00:52:22,300 --> 00:52:27,020
no haber registrado recientemente, y pulse Enter. ¿Qué pasa exactamente?

823
00:52:27,020 --> 00:52:30,150
>> Cuando se pulsa Enter en el equipo, un montón de pasos

824
00:52:30,150 --> 00:52:32,600
iniciar una especie de magia sucede.

825
00:52:32,600 --> 00:52:35,960
Así que aquí, en el servidor de izquierda, web como Facebook está aquí a la derecha,

826
00:52:35,960 --> 00:52:42,500
y de alguna manera está utilizando este lenguaje llamado HTTP, Hypertext Transfer Protocol.

827
00:52:42,500 --> 00:52:46,770
HTTP no es un lenguaje de programación. Es más bien un protocolo.

828
00:52:46,770 --> 00:52:52,310
Se trata de un conjunto de convenciones que los navegadores web y servidores web utilizan cuando comunican entre sí.

829
00:52:52,310 --> 00:52:54,360
Y lo que esto significa es lo siguiente.

830
00:52:54,360 --> 00:52:56,790
Al igual que en el mundo real, tenemos estas convenciones

831
00:52:56,790 --> 00:53:00,140
donde si cumple algún humano por primera vez, si no te importa me seguía la corriente aquí,

832
00:53:00,140 --> 00:53:03,980
Yo iría de ti, dicen: "Hola, mi nombre es David." >> Hola, David. Mi nombre es Sammy.

833
00:53:03,980 --> 00:53:05,770
"Hola, David. Mi nombre es Sammy".

834
00:53:05,770 --> 00:53:08,310
Así que ahora que hemos participado en este tipo de protocolo humano tonto

835
00:53:08,310 --> 00:53:12,200
donde he iniciado el protocolo, Sammy ha respondido,

836
00:53:12,200 --> 00:53:15,060
nos hemos dado la mano, y la transacción se ha completado.

837
00:53:15,060 --> 00:53:18,260
HTTP es muy similar en espíritu.

838
00:53:18,260 --> 00:53:23,350
Cuando su navegador solicita web www.facebook.com,

839
00:53:23,350 --> 00:53:27,020
lo que tu navegador está haciendo realmente está extendiendo su mano, por así decirlo,

840
00:53:27,020 --> 00:53:29,960
al servidor y está enviando un mensaje.

841
00:53:29,960 --> 00:53:34,220
Y ese mensaje es típicamente algo como usarlo - ¿Qué quieres conseguir? -

842
00:53:34,220 --> 00:53:38,740
me la página de inicio, que normalmente se indica por una sola barra en el extremo de un URL.

843
00:53:38,740 --> 00:53:43,790
Y para que lo sepas qué idioma estoy hablando, el navegador te voy a contar

844
00:53:43,790 --> 00:53:46,930
que estoy hablando versión HTTP 1.1,

845
00:53:46,930 --> 00:53:51,980
Y también por si acaso, voy a decirte que el host que quiero que la página de inicio de

846
00:53:51,980 --> 00:53:54,120
es facebook.com.

847
00:53:54,120 --> 00:53:57,730
Normalmente, un navegador web, sin el conocimiento de ti, el ser humano,

848
00:53:57,730 --> 00:54:03,350
le envía este mensaje a través de Internet en las que simplemente escribir www.facebook.com,

849
00:54:03,350 --> 00:54:05,370
>> Intro en su navegador.

850
00:54:05,370 --> 00:54:07,300
¿Y qué significa responder con Facebook?

851
00:54:07,300 --> 00:54:12,540
Responde con algunos detalles crípticos de aspecto similar, pero también mucho más.

852
00:54:12,540 --> 00:54:14,310
Déjame ir adelante a la página principal de Facebook aquí.

853
00:54:14,310 --> 00:54:17,480
Esta es la pantalla que la mayoría de nosotros probablemente nunca vea si permanecer conectado todo el tiempo,

854
00:54:17,480 --> 00:54:19,830
pero esto es de hecho su página de inicio.

855
00:54:19,830 --> 00:54:24,150
Si hacemos esto en Chrome, observe que usted puede levantar estos menús contextuales pequeños.

856
00:54:24,150 --> 00:54:26,980
Con Chrome, ya sea en Mac OS, Windows, Linux, o similar,

857
00:54:26,980 --> 00:54:31,840
Si controlas clic o clic con el botón izquierdo, normalmente puede levantar un menú que tiene este aspecto,

858
00:54:31,840 --> 00:54:35,870
donde algunas opciones esperan, uno de los cuales es de origen Vista de página.

859
00:54:35,870 --> 00:54:39,920
También puede obtener normalmente a estas cosas por ir al menú Ver y husmeando.

860
00:54:39,920 --> 00:54:42,750
Por ejemplo, aquí en Ver, Developer es la misma cosa.

861
00:54:42,750 --> 00:54:45,780
Voy a seguir adelante y mirar en la fuente Vista de página.

862
00:54:45,780 --> 00:54:50,800
Lo que vas a ver es el código HTML que Marcos ha escrito para representar facebook.com.

863
00:54:50,800 --> 00:54:55,910
Es un desastre completo aquí, pero vamos a ver que esto tiene sentido un poco más en poco tiempo.

864
00:54:55,910 --> 00:54:59,840
Pero hay algunas pautas aquí. Permítanme desplácese hacia abajo para cosas como esta.

865
00:54:59,840 --> 00:55:05,730
Esto es difícil para un ser humano de leer, pero nota que hay este patrón de paréntesis angulares

866
00:55:05,730 --> 00:55:10,360
con palabras clave como opción, palabras claves como valor, algunas cadenas entre comillas.

867
00:55:10,360 --> 00:55:15,660
Aquí es donde, cuando se registró por vez primera, se especifica cuál es su año de nacimiento es.

868
00:55:15,660 --> 00:55:19,020
Ese menú desplegable de años de nacimiento es de alguna manera codificado aquí

869
00:55:19,020 --> 00:55:23,870
en este lenguaje llamado HTML, HyperText Markup Language.

870
00:55:23,870 --> 00:55:27,730
En otras palabras, cuando el navegador solicita una página web,

871
00:55:27,730 --> 00:55:30,610
habla esta convención llamado HTTP.

872
00:55:30,610 --> 00:55:35,170
Pero, ¿qué facebook.com responder a esa petición con?

873
00:55:35,170 --> 00:55:38,260
>> Responde con algunos de estos mensajes crípticos, como veremos en un momento.

874
00:55:38,260 --> 00:55:43,760
Pero la mayor parte de su respuesta está en la forma de HTML, HyperText Markup Language.

875
00:55:43,760 --> 00:55:47,170
Ese es el verdadero lenguaje en que está escrito de una página web.

876
00:55:47,170 --> 00:55:52,030
Y lo que un navegador web realmente es, entonces, a la recepción de algo que se parece a esto,

877
00:55:52,030 --> 00:55:57,120
lee de arriba a abajo, de izquierda a derecha, y cada vez que lo ve uno de estos paréntesis angulares

878
00:55:57,120 --> 00:56:03,370
seguido de una palabra clave como opción, se muestra que el lenguaje de marcado de la manera apropiada.

879
00:56:03,370 --> 00:56:06,820
En este caso, se podría visualizar un menú desplegable de años.

880
00:56:06,820 --> 00:56:09,240
Pero de nuevo, esto es un completo desastre a la vista.

881
00:56:09,240 --> 00:56:16,630
Esto no es porque los desarrolladores de Facebook 0 para manifestar 5 por estilo, por ejemplo.

882
00:56:16,630 --> 00:56:20,190
Esto se debe a que la mayor parte del código que se escribe es, de hecho, muy bien escrito,

883
00:56:20,190 --> 00:56:22,450
bien documentado, con una sangría bien, y similares,

884
00:56:22,450 --> 00:56:26,080
pero las máquinas de cursos, ordenadores, navegadores realmente no les importa un bledo

885
00:56:26,080 --> 00:56:27,890
si el código está bien labrada.

886
00:56:27,890 --> 00:56:33,100
Y, de hecho, es totalmente antieconómico para golpear la tecla de tabulación todas esas veces

887
00:56:33,100 --> 00:56:37,650
y poner todos los comentarios a través de su código y de elegir los nombres de variables descriptivos realmente

888
00:56:37,650 --> 00:56:42,340
porque si el navegador no le importa, todo lo que estamos haciendo al final del día es perder bytes.

889
00:56:42,340 --> 00:56:46,660
>> Así que resulta que la mayoría de los sitios web es hacer a pesar de que el código fuente para facebook.com,

890
00:56:46,660 --> 00:56:49,550
para cs50.net y todos estos otros sitios web en Internet

891
00:56:49,550 --> 00:56:53,730
son bien escrito y bien documentado y bien sangrados y similares,

892
00:56:53,730 --> 00:56:59,270
por lo general antes de que el sitio web se coloca en la Internet, el código se minified,

893
00:56:59,270 --> 00:57:02,970
por lo que el HTML y el CSS - algo más que pronto lo veremos -

894
00:57:02,970 --> 00:57:05,960
el código JavaScript pronto veremos se comprime,

895
00:57:05,960 --> 00:57:09,250
por lo que los nombres largos de variable de convertirse en X e Y y Z,

896
00:57:09,250 --> 00:57:13,900
y todos los que los espacios en blanco que hace que todo parezca tan legible es todo tirado,

897
00:57:13,900 --> 00:57:17,700
porque si se piensa en ello de esta manera, Facebook tiene una página de mil millones de visitas al día -

898
00:57:17,700 --> 00:57:21,670
algo así de loco - por lo que si un programador para estar anal

899
00:57:21,670 --> 00:57:26,660
pulsa la barra espaciadora una vez extra sólo para sangrar alguna línea de código cada vez mucho más?

900
00:57:26,660 --> 00:57:29,500
¿Cuál es la implicación de que si Facebook conserva espacios en blanco

901
00:57:29,500 --> 00:57:32,880
en todos los bytes que se envían a la gente en Internet?

902
00:57:32,880 --> 00:57:36,400
Golpear la barra espaciadora una vez que se da un byte extra en su archivo.

903
00:57:36,400 --> 00:57:39,730
Y si mil millones de personas luego proceder a descargar la página principal de ese día,

904
00:57:39,730 --> 00:57:42,060
cuánto más datos ha transmitido a través de Internet?

905
00:57:42,060 --> 00:57:45,200
Un gigabyte por ninguna buena razón.

906
00:57:45,200 --> 00:57:48,510
Y concede, por un montón de sitios web que no es un tema tan escalable,

907
00:57:48,510 --> 00:57:51,030
pero para Facebook, para Google, por algunos de los sitios web más populares

908
00:57:51,030 --> 00:57:54,860
hay gran incentivo económico para que su código parecer un lío

909
00:57:54,860 --> 00:57:58,980
a fin de que usted está utilizando como pocos bytes como sea posible, además de entonces comprimir

910
00:57:58,980 --> 00:58:01,500
usando algo como zip, un algoritmo llamado gzip,

911
00:58:01,500 --> 00:58:04,250
que el navegador hace de forma automática. Pero esto es horrible.

912
00:58:04,250 --> 00:58:08,060
Nunca vamos a aprender cualquier cosa sobre los sitios web de otras personas y cómo diseñar páginas web

913
00:58:08,060 --> 00:58:09,680
si tenemos que verlo así.

914
00:58:09,680 --> 00:58:13,620
>> Así que, afortunadamente, navegadores como Chrome y el IE y Firefox en estos días

915
00:58:13,620 --> 00:58:16,450
normalmente vienen con herramientas de desarrollo integradas.

916
00:58:16,450 --> 00:58:21,730
De hecho, si voy por aquí a Inspeccionar Elemento o si voy a ver, Developer,

917
00:58:21,730 --> 00:58:25,220
y vaya a Herramientas de Desarrollo de manera explícita,

918
00:58:25,220 --> 00:58:27,640
esta ventana en la parte inferior de mi pantalla ahora aparece.

919
00:58:27,640 --> 00:58:31,230
Es un poco intimidante al principio, porque hay un montón de fichas desconocidos aquí,

920
00:58:31,230 --> 00:58:34,510
pero si hago clic en Elementos de todo el camino en la parte inferior izquierda,

921
00:58:34,510 --> 00:58:38,810
Chrome es, obviamente, muy inteligente. Sabe cómo interpretar todo este código.

922
00:58:38,810 --> 00:58:42,320
Y lo que hace es que Chrome se limpia todo el HTML de Facebook.

923
00:58:42,320 --> 00:58:45,680
A pesar de que no hay espacios en blanco allí, no hay sangría allí,

924
00:58:45,680 --> 00:58:51,120
ahora cuenta de que yo pueda empezar a navegar por esta página web aún más jerárquica.

925
00:58:51,120 --> 00:58:56,910
Resulta que todas las páginas web escritas en un lenguaje llamado HTML 5 debe comenzar con esto,

926
00:58:56,910 --> 00:59:03,980
esta declaración DOCTYPE, por decirlo así: <! DOCTYPE html>

927
00:59:03,980 --> 00:59:07,840
Es un poco de luz y de color gris allí, pero esa es la primera línea de código en el archivo,

928
00:59:07,840 --> 00:59:12,080
y que le dice al navegador, "Hey, aquí viene un poco de HTML5. Aquí viene una página web."

929
00:59:12,080 --> 00:59:18,490
El primer tramo abierto más allá que pasa a ser esto, un corchete abierto tag HTML,

930
00:59:18,490 --> 00:59:22,320
y luego, si me zambullo en el más profundo - estas flechas son completamente sin sentido;

931
00:59:22,320 --> 00:59:25,140
no son más que por el amor de presentación, ellos no están realmente en el archivo -

932
00:59:25,140 --> 00:59:30,300
cuenta que dentro de la etiqueta HTML de Facebook, algo que comienza con un corchete abierto

933
00:59:30,300 --> 00:59:32,910
y luego tiene una palabra se denomina una etiqueta.

934
00:59:32,910 --> 00:59:38,610
Así que dentro de la etiqueta HTML es aparentemente una etiqueta de la cabeza y un cuerpo de la etiqueta.

935
00:59:38,610 --> 00:59:41,930
Dentro de la etiqueta de la cabeza ahora es un lío para Facebook

936
00:59:41,930 --> 00:59:45,620
porque tienen una gran cantidad de metadatos y otras cosas para la comercialización y la publicidad.

937
00:59:45,620 --> 00:59:50,600
>> Pero si se desplaza hacia abajo, abajo, abajo, abajo, vamos a ver dónde está. Aquí está.

938
00:59:50,600 --> 00:59:52,210
Ésta es al menos algo familiar.

939
00:59:52,210 --> 00:59:55,990
El título de la página principal de Facebook, si alguna vez pinche en la pestaña en la barra de título,

940
00:59:55,990 --> 00:59:59,060
es Bienvenido a Facebook - Entrar, Registrarse o más.

941
00:59:59,060 --> 01:00:01,110
Eso es lo que se ve en la barra de título de Chrome,

942
01:00:01,110 --> 01:00:03,100
y eso es lo que está representado en el código.

943
01:00:03,100 --> 01:00:08,090
Si dejamos de lado todo lo demás en la cabeza, la mayor parte de las entrañas de una página web se encuentran en el cuerpo,

944
01:00:08,090 --> 01:00:10,940
y resulta que el código de Facebook se va a parecer más complejo

945
01:00:10,940 --> 01:00:14,540
que la mayoría de las cosas que vamos a escribir inicialmente sólo porque se ha construido a lo largo de los años,

946
01:00:14,540 --> 01:00:17,260
pero hay un montón de etiquetas de script, el código JavaScript,

947
01:00:17,260 --> 01:00:18,870
que hace que el sitio web muy interactiva:

948
01:00:18,870 --> 01:00:22,330
ver las actualizaciones de estado de forma instantánea utilizando lenguajes como JavaScript.

949
01:00:22,330 --> 01:00:25,270
Hay algo que se llama un div, que es una división de una página.

950
01:00:25,270 --> 01:00:27,940
Pero antes de llegar a ese detalle, vamos a tratar de alejar

951
01:00:27,940 --> 01:00:31,920
y ver una versión más simple de Facebook 1.0, por así decirlo.

952
01:00:31,920 --> 01:00:34,740
Aquí está el hola mundo, de las páginas web.

953
01:00:34,740 --> 01:00:37,370
Tiene esa declaración DOCTYPE en la parte superior

954
01:00:37,370 --> 01:00:40,280
que es un poco diferente de todo lo demás.

955
01:00:40,280 --> 01:00:46,130
Nada más que escribir en una página web va a empezar con <! excepto que la línea no

956
01:00:46,130 --> 01:00:48,880
y excepto por algo que se llama los comentarios en HTML.

957
01:00:48,880 --> 01:00:53,000
Pero en su mayor parte, todo en una página web es abrir el paréntesis, la palabra clave, corchete de cierre.

958
01:00:53,000 --> 01:00:56,220
>> En este caso se puede ver el más simple de las páginas web posibles.

959
01:00:56,220 --> 01:01:00,260
La etiqueta HTML contiene una etiqueta de la cabeza y que contiene una etiqueta de cuerpo,

960
01:01:00,260 --> 01:01:04,580
notar que hay esta noción de arranque y parada etiquetas.

961
01:01:04,580 --> 01:01:11,360
Esta es la etiqueta de inicio para HTML, esta es la etiqueta de cierre o etiqueta final.

962
01:01:11,360 --> 01:01:15,400
Tenga en cuenta que son una especie de opuestos en el sentido de que la etiqueta de cierre o etiqueta de cierre

963
01:01:15,400 --> 01:01:20,030
ha esta barra diagonal en el interior de sí mismo.

964
01:01:20,030 --> 01:01:23,540
Mientras tanto, hay una etiqueta de la cabeza abierta aquí y una etiqueta de cabeza cerca de aquí.

965
01:01:23,540 --> 01:01:26,880
>> Hay un título abierto y una etiqueta de título aquí cerca.

966
01:01:26,880 --> 01:01:29,850
El hecho de que he puesto el título en una línea puramente arbitraria.

967
01:01:29,850 --> 01:01:33,760
Simplemente parecía que iba a encajar muy bien en una línea, así que no se molestó en golpear Introduce un par de veces.

968
01:01:33,760 --> 01:01:38,200
Mientras tanto, el cuerpo lo hice guión para estar siempre tan claro.

969
01:01:38,200 --> 01:01:41,050
Tenga en cuenta que HTML es un lenguaje bastante tonto.

970
01:01:41,050 --> 01:01:43,410
De hecho, en el día antes de que existieran los editores WYSIWYG

971
01:01:43,410 --> 01:01:46,770
y Microsoft Word en el que puede decir: "Establecer como negrita, cursiva hacer esto"

972
01:01:46,770 --> 01:01:50,850
que realmente debería escribir pequeños comandos en los ensayos 20 + años

973
01:01:50,850 --> 01:01:55,740
por el que usted diría: "Empieza a hacer este texto en negrita. Deja de hacer este texto en negrita".

974
01:01:55,740 --> 01:01:59,010
"Empieza a hacer esto cursiva texto. Dejar de hacer esto cursiva texto."

975
01:01:59,010 --> 01:02:01,850
>> Eso es lo que HTML o cualquier otro lenguaje de marcas es.

976
01:02:01,850 --> 01:02:05,530
Esta primera etiqueta dice: "Oye, navegador. Aquí viene algo de HTML".

977
01:02:05,530 --> 01:02:09,880
La etiqueta siguiente dice: "Oye, navegador. Ahí viene el jefe, el encabezado de mi página web."

978
01:02:09,880 --> 01:02:11,650
"Hey, navegador. Ahí viene el título".

979
01:02:11,650 --> 01:02:15,880
Y entonces para acá, "Hey, navegador. Eso es todo por el título".

980
01:02:15,880 --> 01:02:20,000
Así que esta es la forma en que el navegador sepa que ya no aparezcan más caracteres de los que hola, mundo

981
01:02:20,000 --> 01:02:21,860
en la barra de título.

982
01:02:21,860 --> 01:02:23,640
Mientras tanto, esto dice, "Eso es todo por la cabeza".

983
01:02:23,640 --> 01:02:28,340
Esta dice: "Aquí viene el cuerpo Aquí está el cuerpo real." - Literalmente, las palabras hola, mundo.

984
01:02:28,340 --> 01:02:33,190
Y esto dice aquí: "Eso es para el cuerpo. Eso es todo por el HTML."

985
01:02:33,190 --> 01:02:34,640
Así que los navegadores son bastante tontos.

986
01:02:34,640 --> 01:02:39,920
Sólo leer estas cosas arriba a abajo, de izquierda a derecha, y hacer exactamente lo que se les dice que hacer.

987
01:02:39,920 --> 01:02:41,860
Vamos a hacer realidad un pequeño ejemplo aquí.

988
01:02:41,860 --> 01:02:46,240
Déjame abrir el más simple de los programas en mi Mac aquí, a saber TextEdit.

989
01:02:46,240 --> 01:02:48,220
En Windows se puede usar el Bloc de notas.

990
01:02:48,220 --> 01:02:50,520
Pero esto es todo lo que necesita para empezar a hacer páginas web.

991
01:02:50,520 --> 01:02:53,730
Voy a seguir adelante y sólo tienes que copiar y pegar este código en el archivo.

992
01:02:53,730 --> 01:02:57,210
Voy a seguir adelante y guárdelo en el escritorio,

993
01:02:57,210 --> 01:03:01,220
y voy a guardar esto como hello.html,

994
01:03:01,220 --> 01:03:03,840
y ahora el archivo se llama hello.html.

995
01:03:03,840 --> 01:03:05,690
Aquí está en mi escritorio.

996
01:03:05,690 --> 01:03:11,130
Permítanme ahora entrar en un navegador y arrastre el archivo en el navegador.

997
01:03:11,130 --> 01:03:14,060
Y voilá, aquí está mi página web por primera vez.

998
01:03:14,060 --> 01:03:17,340
Tenga en cuenta que el título de la ficha es hola, mundo según la etiqueta del título,

999
01:03:17,340 --> 01:03:20,040
y observe que hola mundo es el cuerpo de la página web,

1000
01:03:20,040 --> 01:03:22,190
y woo-hoo, estoy en el Internet.

1001
01:03:22,190 --> 01:03:24,700
>> No estoy muy, bien, porque el archivo no está en el Internet.

1002
01:03:24,700 --> 01:03:28,330
Le pasa a ser en mi disco duro local en esa ruta en particular.

1003
01:03:28,330 --> 01:03:32,720
Pero la idea es la misma. Todo lo que necesitamos ahora es un servidor web en la que desea cargar.

1004
01:03:32,720 --> 01:03:37,410
Pero primero vamos a introducir complejidad en realidad un poco más y un poco más de estilización.

1005
01:03:37,410 --> 01:03:39,890
Se trata de un simple, si aburrido, en la página web.

1006
01:03:39,890 --> 01:03:41,990
Resulta que hay otros tipos de etiquetas que se pueden utilizar.

1007
01:03:41,990 --> 01:03:45,530
Por ejemplo, aquí en amarillo he introducido dos nuevas etiquetas.

1008
01:03:45,530 --> 01:03:49,630
No vamos a jugar mucho con ellos hoy, pero note que la etiqueta de enlace

1009
01:03:49,630 --> 01:03:52,520
de alguna manera se ve diferente de todo lo demás.

1010
01:03:52,520 --> 01:03:55,370
La etiqueta de enlace toma lo que se llaman atributos,

1011
01:03:55,370 --> 01:03:59,770
y un atributo es algo que modifica el comportamiento de una variable.

1012
01:03:59,770 --> 01:04:03,840
En este caso no se trata de la mejor elección de los nombres, enlace, ya que es algo sin sentido,

1013
01:04:03,840 --> 01:04:11,590
pero esta etiqueta link dice, esencialmente, incluya el archivo llamado styles.css dentro de mi página web.

1014
01:04:11,590 --> 01:04:15,400
Usted puede pensar en esto como algo análogo a C directiva # include.

1015
01:04:15,400 --> 01:04:19,650
Styles.css se está refiriendo a un lenguaje completamente diferente que no vamos a jugar con la actualidad,

1016
01:04:19,650 --> 01:04:23,790
pero es por estética: los tamaños de fuente, colores de relleno, sangría, márgenes,

1017
01:04:23,790 --> 01:04:26,040
y todo ese tipo de detalles estéticos.

1018
01:04:26,040 --> 01:04:28,820
Mientras tanto, la etiqueta de script es funcionalmente similar,

1019
01:04:28,820 --> 01:04:33,140
sino que incluyen CSS, que la lengua, incluye otro idioma, JavaScript.

1020
01:04:33,140 --> 01:04:37,810
En otras palabras, con estas dos etiquetas que finalmente será capaz de escribir mi propia página web

1021
01:04:37,810 --> 01:04:41,490
pero también tirar en el código que yo o alguien más ha escrito

1022
01:04:41,490 --> 01:04:44,350
para que podamos estar de pie sobre los hombros de los demás, podemos practicar un buen diseño,

1023
01:04:44,350 --> 01:04:46,120
factorización de código común.

1024
01:04:46,120 --> 01:04:49,090
Si tengo 10 páginas web diferentes, esto significa que algunos de mis estética

1025
01:04:49,090 --> 01:04:52,490
puede ser un factor fuera, al igual que # include, en un archivo separado.

1026
01:04:52,490 --> 01:04:54,420
Así que nos vamos acercando.

1027
01:04:54,420 --> 01:04:57,180
Pero que en realidad primero hacer algo más interesante con este archivo.

1028
01:04:57,180 --> 01:05:01,110
>> Una vez más, esto es sólo TextEdit. No estoy técnicamente en Internet todavía, pero vamos a llegar allí.

1029
01:05:01,110 --> 01:05:04,910
Me gustaría hacer hola, mundo un poco más audaz de lo que es.

1030
01:05:04,910 --> 01:05:10,890
Así que hola, vamos a decir arbitrariamente <b> para negrita.

1031
01:05:10,890 --> 01:05:15,910
Una vez más, la historia es la misma: hello, coma, comenzar a hacer esta audaz,

1032
01:05:15,910 --> 01:05:19,730
entonces el mundo se imprime en negrita, y esto significa dejar de imprimir esto en negrita.

1033
01:05:19,730 --> 01:05:24,020
Déjenme seguir adelante y salvar a mi archivo, vuelva a Chrome, voy a hacer un zoom sólo para que podamos ver mejor,

1034
01:05:24,020 --> 01:05:27,870
y volver a cargar, y verás que el mundo se encuentra ahora en negrita.

1035
01:05:27,870 --> 01:05:31,810
La red es acerca de los hipervínculos, así que vamos a seguir adelante y hacer esto:

1036
01:05:31,810 --> 01:05:38,550
mi sitio favorito es, digamos, youtube.com.

1037
01:05:38,550 --> 01:05:43,810
Guardar, cargar. Bien. Hay un par de problemas ahora, además de la fealdad de la web.

1038
01:05:43,810 --> 01:05:47,310
1, estoy bastante seguro de que pulse Enter aquí. Y lo hice.

1039
01:05:47,310 --> 01:05:51,590
No sólo pulsar Enter, también sangrado, practicar lo que hemos estado predicando sobre el estilo,

1040
01:05:51,590 --> 01:05:54,930
pero mi está justo al lado del mundo.

1041
01:05:54,930 --> 01:05:58,410
¿Por qué es esto? Los navegadores sólo hacer lo que les dicen que hagan.

1042
01:05:58,410 --> 01:06:04,010
No le he dicho el navegador ", las líneas de ruptura aquí. Inserte el párrafo romper aquí."

1043
01:06:04,010 --> 01:06:07,820
Así que el navegador, no importa si le pego Retorno 30 veces,

1044
01:06:07,820 --> 01:06:10,820
todavía va a poner al lado de mi mundo.

1045
01:06:10,820 --> 01:06:15,930
Lo que realmente hay que hacer aquí es decir algo como <br/>, inserte un salto de línea.

1046
01:06:15,930 --> 01:06:17,940
>> Y en realidad, un salto de línea es una especie de cosa rara

1047
01:06:17,940 --> 01:06:21,650
porque no se puede empezar a mover a otra línea, y luego hacer algo,

1048
01:06:21,650 --> 01:06:25,380
y luego dejar de moverse a una nueva línea. Es una especie de una operación atómica.

1049
01:06:25,380 --> 01:06:28,140
O lo hacen o no. Usted pulsa Intro o no.

1050
01:06:28,140 --> 01:06:33,390
Así br es un poco de una etiqueta diferente, por lo que tengo que ordenar de ambos abiertos y cierre

1051
01:06:33,390 --> 01:06:35,230
todo de una vez.

1052
01:06:35,230 --> 01:06:37,500
La sintaxis de que es esta.

1053
01:06:37,500 --> 01:06:41,760
Técnicamente, se podría hacer algo como esto en algunas versiones de HTML,

1054
01:06:41,760 --> 01:06:45,600
pero esto es una estupidez, porque no hay razón para iniciar y detener algo

1055
01:06:45,600 --> 01:06:48,420
si en su lugar puede hacer todo a la vez.

1056
01:06:48,420 --> 01:06:52,310
Darse cuenta de que HTML5 no es estrictamente necesario que esta barra,

1057
01:06:52,310 --> 01:06:55,410
por lo que verá los libros de texto y recursos en línea que no la tienen,

1058
01:06:55,410 --> 01:06:59,780
pero por si acaso vamos a practicar la simetría que hemos visto hasta el momento.

1059
01:06:59,780 --> 01:07:02,870
Esto significa que la etiqueta es a la vez abierto y cerrado.

1060
01:07:02,870 --> 01:07:05,220
Así que ahora vamos a salvar a mi archivo, vuelva aquí.

1061
01:07:05,220 --> 01:07:10,240
Bueno, por lo que está empezando a verse mejor, a excepción de la Web que sé es una especie de clic,

1062
01:07:10,240 --> 01:07:13,610
y, sin embargo youtube aquí no parecen conducir a nada.

1063
01:07:13,610 --> 01:07:17,560
Eso es porque a pesar de que se ve como un enlace, el navegador no sabe que per se,

1064
01:07:17,560 --> 01:07:20,670
así que tengo que decirle al navegador que se trata de un enlace.

1065
01:07:20,670 --> 01:07:22,620
>> La manera de hacer esto es utilizar una etiqueta de anclaje:

1066
01:07:22,620 --> 01:07:26,770
<A href para hiper de referencia, que es el camino de la vieja escuela de decir un enlace,

1067
01:07:26,770 --> 01:07:35,900
= "Http://www.youtube.com">

1068
01:07:35,900 --> 01:07:38,490
y me dejó pasar esto a una nueva línea justo por lo que es un poco más legible,

1069
01:07:38,490 --> 01:07:40,060
y voy a reducir el tamaño de fuente.

1070
01:07:40,060 --> 01:07:43,890
Estoy hecho todavía? No. No va a ser esta dicotomía.

1071
01:07:43,890 --> 01:07:46,760
Esta etiqueta, la etiqueta de ancla, en efecto, tener un atributo,

1072
01:07:46,760 --> 01:07:52,900
que modifica su comportamiento, y el valor de ese atributo es aparentemente URL de YouTube.

1073
01:07:52,900 --> 01:07:56,380
Pero nótese la dicotomía es que sólo porque esa es la URL que va a,

1074
01:07:56,380 --> 01:08:01,020
eso no quiere decir que tiene que ser la palabra que está subrayado y hacer un enlace.

1075
01:08:01,020 --> 01:08:03,960
Más bien, que puede ser algo como esto.

1076
01:08:03,960 --> 01:08:10,870
Así que tengo que decir esta palabra deja de hacer un hipervínculo mediante la etiqueta de ancla cerca.

1077
01:08:10,870 --> 01:08:12,650
Nótese que no estoy haciendo esto.

1078
01:08:12,650 --> 01:08:15,890
1, esto sólo sería una pérdida de tiempo para todos y no es necesario.

1079
01:08:15,890 --> 01:08:19,290
>> Para cerrar una etiqueta, sólo se menciona el nombre de la etiqueta de nuevo.

1080
01:08:19,290 --> 01:08:21,800
Usted no menciona ninguno de los atributos.

1081
01:08:21,800 --> 01:08:26,189
Así que vamos a salvar eso, ir hacia atrás. Bueno, listo, ahora es azul y con hipervínculos.

1082
01:08:26,189 --> 01:08:29,430
Si hace clic en él, me hace realmente ir a YouTube.

1083
01:08:29,430 --> 01:08:32,529
Así que, aunque mi página web no está en Internet, es por lo menos HTML,

1084
01:08:32,529 --> 01:08:37,930
y si dejamos que el Internet a ponerse al día, que en realidad terminaría aquí, en youtube.com.

1085
01:08:37,930 --> 01:08:40,670
Y puedo volver atrás y esta es mi página web. Pero fíjate en esto.

1086
01:08:40,670 --> 01:08:43,120
Si alguna vez has recibido spam o un ataque de phishing,

1087
01:08:43,120 --> 01:08:45,850
Ahora usted tiene la capacidad después de sólo cinco minutos para hacer lo mismo.

1088
01:08:45,850 --> 01:08:50,920
Podemos ir allí y hacer algo como www.badguy.com

1089
01:08:50,920 --> 01:08:59,319
o lo que el sitio web es incompleta, y entonces se puede decir verificar tu cuenta PayPal.

1090
01:08:59,319 --> 01:09:04,840
[Risas] Y ahora esto va a ir a badguy.com, que no voy a hacer clic en

1091
01:09:04,840 --> 01:09:08,000
porque no tengo ni idea de dónde conduce. [Risas]

1092
01:09:08,000 --> 01:09:10,859
>> Pero ahora tenemos la capacidad para poner fin realmente allí.

1093
01:09:10,859 --> 01:09:12,640
Así que realmente estamos empezando a arañar la superficie.

1094
01:09:12,640 --> 01:09:15,830
No estamos programación en sí, que estamos escribiendo lenguaje de marcas.

1095
01:09:15,830 --> 01:09:18,569
Pero tan pronto como se completan nuestro vocabulario en HTML,

1096
01:09:18,569 --> 01:09:21,520
vamos a introducir PHP, un lenguaje de programación real

1097
01:09:21,520 --> 01:09:26,859
que nos permitirá generar automáticamente código HTML, CSS generar de forma automática,

1098
01:09:26,859 --> 01:09:29,430
para que podamos comenzar el miércoles para poner en práctica, por ejemplo,

1099
01:09:29,430 --> 01:09:31,700
nuestro propio motor de búsqueda y mucho más.

1100
01:09:31,700 --> 01:09:34,770
Pero más sobre esto en un par de días. Nos vemos entonces.

1101
01:09:34,870 --> 01:09:39,000
>> [CS50.TV]