1
00:00:00,000 --> 00:00:04,674
[MÚSICA]

2
00:00:04,674 --> 00:00:08,968
Hasta ahora, nos hemos concentrado en diseñar e

3
00:00:08,968 --> 00:00:14,540
implementar nuestro sitio web, ya sea código HTML, CSS o JavaScript.

4
00:00:16,170 --> 00:00:21,890
Una vez que su sitio web esté listo, el siguiente paso es poder construir su sitio web e

5
00:00:21,890 --> 00:00:26,010
implementarlo en un servidor web, para que quede disponible públicamente.

6
00:00:27,300 --> 00:00:30,750
A continuación, nuestro segundo conjunto de pasos que tenemos que seguir antes de que

7
00:00:30,750 --> 00:00:34,580
su sitio web esté listo para su implementación en un servidor web.

8
00:00:34,580 --> 00:00:39,079
Esto es lo que vamos a ver en esta y en la próxima lección.

9
00:00:40,915 --> 00:00:43,479
Como mencioné, el desarrollo y la

10
00:00:43,479 --> 00:00:47,870
implementación web implican muchas tareas repetitivas.

11
00:00:47,870 --> 00:00:54,820
Obviamente, la escritura del código HTML/CSS y JavaScript es una parte de él.

12
00:00:54,820 --> 00:00:57,600
Pero la otra parte es el hecho de que si escribe

13
00:00:59,200 --> 00:01:04,170
el código CSS usando uno de los lenguajes de preprocesamiento CSS, como Sass o

14
00:01:04,170 --> 00:01:09,200
Less, entonces necesita convertir ese código en el código CSS correspondiente.

15
00:01:09,200 --> 00:01:14,614
A partir de entonces, debe hacer un procesamiento adicional en sus

16
00:01:14,614 --> 00:01:20,810
archivos CSS como la minificación, la compactación y la concatenación.

17
00:01:20,810 --> 00:01:24,850
Hablaremos un poco más de esto en las próximas diapositivas.

18
00:01:24,850 --> 00:01:30,090
Del mismo modo, con su código JavaScript, debe hacer

19
00:01:30,090 --> 00:01:34,580
JShinting, buscando posibles errores.

20
00:01:34,580 --> 00:01:40,590
Luego concatenación de varios archivos de script

21
00:01:40,590 --> 00:01:45,100
e incluso uglification y el desmantelamiento del código.

22
00:01:45,100 --> 00:01:49,240
Hablaremos un poco de eso en las próximas diapositivas.

23
00:01:49,240 --> 00:01:54,889
Todas estas tareas son tareas repetitivas, que nos gustaría automatizar en la

24
00:01:54,889 --> 00:02:00,536
medida de lo posible, para que podamos concentrarnos en el diseño real y la

25
00:02:00,536 --> 00:02:05,730
construcción de nuestro sitio web, en lugar de en estas tareas repetitivas.

26
00:02:05,730 --> 00:02:09,623
Para que el principio DRY, no repita el principio,

27
00:02:09,623 --> 00:02:11,840
es muy esencial en este caso.

28
00:02:11,840 --> 00:02:16,840
No queremos perder nuestro tiempo en tareas de combustión repetitivas

29
00:02:16,840 --> 00:02:20,140
y, en cambio, tratar de automatizarlas en la medida de lo posible para

30
00:02:20,140 --> 00:02:23,410
que puedan ejecutarse siempre que sea necesario.

31
00:02:23,410 --> 00:02:27,649
Hablemos de algunas de estas tareas repetitivas con un poco más de detalle.

32
00:02:28,950 --> 00:02:33,580
Tomemos el ejemplo de CSS como un caso.

33
00:02:33,580 --> 00:02:37,470
Cuando escribimos código CSS, a menudo escribimos el código

34
00:02:37,470 --> 00:02:41,440
usando uno de los lenguajes de preprocesamiento como Less o Sass.

35
00:02:41,440 --> 00:02:46,920
Ahora, una vez que el código está escrito, entonces necesita ser convertido en CSS mediante el uso

36
00:02:46,920 --> 00:02:52,460
de uno de los preprocesadores como hemos visto en la lección anterior.

37
00:02:54,130 --> 00:02:59,660
Allí, es posible que tengamos que hacer algún prefijo específico del proveedor para

38
00:02:59,660 --> 00:03:06,300
nuestro código CSS para abordar los problemas que podrían surgir con varios navegadores.

39
00:03:06,300 --> 00:03:12,599
Así que aquí es donde se usa la tarea de hacer auto-prefijo,

40
00:03:12,599 --> 00:03:16,980
por lo que esto se puede hacer automáticamente para nosotros.

41
00:03:16,980 --> 00:03:20,430
Del mismo modo, una vez que su código CSS está escrito, obviamente,

42
00:03:20,430 --> 00:03:26,010
la forma en que escribimos el código CSS es ser humanamente legible.

43
00:03:26,010 --> 00:03:30,550
Pero para una máquina, realmente no le importa si hay suficientes espacios

44
00:03:30,550 --> 00:03:34,000
entre el código o si está formateado correctamente o no.

45
00:03:35,100 --> 00:03:41,274
Por lo tanto, la minificación es el proceso de eliminar todos los caracteres innecesarios,

46
00:03:41,274 --> 00:03:46,080
el espacio en blanco, las líneas nuevas, los comentarios, de su código CSS.

47
00:03:46,080 --> 00:03:51,280
Para que su resultado final sea un archivo muy compacto con un número mínimo

48
00:03:51,280 --> 00:03:56,306
de caracteres, por lo que se puede servir muy, muy rápidamente.

49
00:03:56,306 --> 00:03:57,812
Pero al mismo tiempo,

50
00:03:57,812 --> 00:04:03,099
desea preservar la funcionalidad que diseñó en su código CSS.

51
00:04:04,550 --> 00:04:09,140
Del mismo modo, puede distribuir su código CSS en muchos archivos

52
00:04:09,140 --> 00:04:12,870
mientras diseña y construye su sitio web.

53
00:04:12,870 --> 00:04:17,620
Es posible que desee concatenar todos ellos en un único archivo CSS al final, de

54
00:04:17,620 --> 00:04:21,430
modo que sólo un único archivo CSS necesita ser descargado

55
00:04:21,430 --> 00:04:25,290
por el navegador cuando está renderizando su sitio web.

56
00:04:25,290 --> 00:04:27,150
Por lo tanto, la concatenación es

57
00:04:27,150 --> 00:04:32,340
otra tarea que está involucrada cuando está construyendo su sitio web.

58
00:04:33,660 --> 00:04:38,940
Del mismo modo, cuando escribas código JavaScript, ya sea puro JavaScript

59
00:04:38,940 --> 00:04:44,800
o jQuery o uno de los marcos que usaremos en

60
00:04:44,800 --> 00:04:50,640
los futuros cursos de esta especialización, necesitarías escribir código JavaScript.

61
00:04:50,640 --> 00:04:53,550
Así que una vez que haya escrito el código JavaScript, querrá poder verificar

62
00:04:53,550 --> 00:04:57,510
el código JavaScript en busca de errores y posibles problemas.

63
00:04:57,510 --> 00:05:00,576
Cosas como punto y coma faltantes,

64
00:05:02,810 --> 00:05:09,030
uso inadecuado del lenguaje, y así sucesivamente, así que lo que llamamos como análisis de código estático.

65
00:05:09,030 --> 00:05:13,490
Así que si desea poder realizar esto, incluso antes de implementar nuestro

66
00:05:14,830 --> 00:05:18,180
sitio web en el servidor web.

67
00:05:18,180 --> 00:05:23,379
Del mismo modo, podríamos organizar nuestro código en varios archivos JavaScript.

68
00:05:23,379 --> 00:05:28,135
Cuando realmente implementamos, es posible que deseemos concatenar todos estos archivos en

69
00:05:28,135 --> 00:05:33,515
un único archivo JavaScript y luego usarlo en nuestras páginas web.

70
00:05:33,515 --> 00:05:36,775
Y esta concatenación se puede hacer automáticamente.

71
00:05:36,775 --> 00:05:42,340
Del mismo modo, la uglificación del código JavaScript, que significa

72
00:05:42,340 --> 00:05:46,720
la minificación, lo que significa eliminar todos los espacios

73
00:05:46,720 --> 00:05:48,880
en blanco innecesarios y comentarios, etc.

74
00:05:48,880 --> 00:05:53,670
Y desmantelamiento del código, lo que significa reducir los nombres de las

75
00:05:53,670 --> 00:05:58,100
variables locales a letras simples siempre que sea posible.

76
00:05:58,100 --> 00:06:01,562
Ahora, desde la perspectiva de una computadora,

77
00:06:01,562 --> 00:06:06,790
realmente no le importa cómo se vea el código, siempre y cuando funcione correctamente.

78
00:06:06,790 --> 00:06:12,230
Para el formato legible por humanos, obviamente escribimos código de una

79
00:06:12,230 --> 00:06:17,960
manera mucho más elaborada, por lo que es más fácil para nosotros seguir lo que está haciendo el código.

80
00:06:17,960 --> 00:06:19,620
Por lo tanto, cuando realmente implementa,

81
00:06:19,620 --> 00:06:23,460
es posible que desee eliminar todas las características extrañas de su código.

82
00:06:23,460 --> 00:06:29,226
Y luego compactarlo para que se sirva la cantidad mínima de código.

83
00:06:29,226 --> 00:06:35,270
Al mismo tiempo, una vez finalizado el

84
00:06:35,270 --> 00:06:37,200
proceso de concatenación y uglificación de JShint,

85
00:06:37,200 --> 00:06:41,990
es posible que desee asegurarse de que el código resultante siga funcionando correctamente.

86
00:06:41,990 --> 00:06:46,490
Por lo tanto, es posible que desee volver a comprobar su código en busca de posibles errores.

87
00:06:47,550 --> 00:06:52,127
CSS y JavaScript son dos aspectos importantes de su desarrollo web

88
00:06:52,127 --> 00:06:55,640
a los que obviamente debe prestar mucha atención.

89
00:06:55,640 --> 00:06:59,640
Pero hay muchas otras tareas más pequeñas que debe realizar

90
00:06:59,640 --> 00:07:02,870
antes de que su sitio web esté listo para su implementación.

91
00:07:02,870 --> 00:07:08,601
Es posible que incluya muchas imágenes en sus páginas web.

92
00:07:08,601 --> 00:07:14,574
Una vez que su sitio web esté listo, es posible

93
00:07:14,574 --> 00:07:17,881
que desee compactar esas imágenes para optimizar el tamaño de los archivos, de modo

94
00:07:17,881 --> 00:07:23,440
que sus imágenes sean archivos de tamaño mínimo para ser implementados.

95
00:07:24,510 --> 00:07:30,310
Del mismo modo, mientras está haciendo desarrollo, puede estar haciendo modificaciones,

96
00:07:30,310 --> 00:07:35,580
por ejemplo, a sus archivos Sass o a su código JavaScript.

97
00:07:35,580 --> 00:07:38,268
Cuando se realizan dichas modificaciones,

98
00:07:38,268 --> 00:07:42,748
desea poder llevar a cabo automáticamente esas tareas,

99
00:07:42,748 --> 00:07:47,990
como las tareas de concatenación, minificación y uglificación.

100
00:07:47,990 --> 00:07:52,110
Así que podríamos usar tareas de vigilancia,

101
00:07:52,110 --> 00:07:56,480
cuyo trabajo principal es vigilar todos estos archivos.

102
00:07:56,480 --> 00:07:59,340
Y si se realiza algún cambio en estos archivos,

103
00:07:59,340 --> 00:08:03,070
las tareas se ejecutarán automáticamente.

104
00:08:03,070 --> 00:08:09,260
Esto liberará mucho de nuestro tiempo de hacer tareas repetitivas manualmente.

105
00:08:10,610 --> 00:08:15,320
Veremos algo de esto con más detalle en los ejercicios que siguen.

106
00:08:16,660 --> 00:08:22,060
Otro aspecto, mientras está haciendo su desarrollo,

107
00:08:22,060 --> 00:08:25,940
es poder servir su código y

108
00:08:25,940 --> 00:08:30,570
ver el código en su navegador.

109
00:08:30,570 --> 00:08:37,960
Así que hemos visto el uso del servidor en vivo en nuestro desarrollo anterior,

110
00:08:37,960 --> 00:08:42,330
donde teníamos el servidor funcionando y sirviendo el código.

111
00:08:42,330 --> 00:08:46,530
Para que podamos ver los cambios que hacemos instantáneamente

112
00:08:48,230 --> 00:08:51,020
siendo renderizados en el navegador.

113
00:08:51,020 --> 00:08:55,549
Por lo tanto, para esto, necesitamos servidor y mecanismo de carga de vida, y el

114
00:08:55,549 --> 00:09:01,340
servidor en vivo que vimos anteriormente es un ejemplo de cómo podemos lograr esto.

115
00:09:02,740 --> 00:09:07,850
Finalmente, si está escribiendo código, obviamente necesita llevar a cabo pruebas

116
00:09:07,850 --> 00:09:14,210
de su código, lo que, en el caso de Bootstrap, es mucho menos considerado.

117
00:09:14,210 --> 00:09:18,930
Pero a medida que pasa a usar varios marcos de JavaScript,

118
00:09:18,930 --> 00:09:21,915
las pruebas se convierten en una tarea igualmente importante.

119
00:09:23,190 --> 00:09:28,680
Por último, desea poder realizar todas estas tareas y, a

120
00:09:28,680 --> 00:09:34,250
continuación, crear el código de implementación final que se puede cargar en su

121
00:09:34,250 --> 00:09:40,790
servidor web para que su sitio web esté disponible para el público en general.

122
00:09:42,450 --> 00:09:48,115
Los pasos implicados en la construcción de su sitio para la implementación, lo que llamamos

123
00:09:48,115 --> 00:09:53,950
construir los archivos de distribución, también es una tarea igualmente importante.

124
00:09:53,950 --> 00:09:59,754
Vamos a ver algunos de ellos a través de ejemplos en el siguiente ejercicio y

125
00:09:59,754 --> 00:10:04,470
también la siguiente lección donde vamos a ver a los corredores de tareas.

126
00:10:04,470 --> 00:10:10,569
[ MÚSICA]