[MÚSICA]
Hasta ahora, nos hemos concentrado en diseñar e
implementar nuestro sitio web, ya sea código HTML, CSS o JavaScript.
Una vez que su sitio web esté listo, el siguiente paso es poder construir su sitio web e
implementarlo en un servidor web, para que quede disponible públicamente.
A continuación, nuestro segundo conjunto de pasos que tenemos que seguir antes de que
su sitio web esté listo para su implementación en un servidor web.
Esto es lo que vamos a ver en esta y en la próxima lección.
Como mencioné, el desarrollo y la
implementación web implican muchas tareas repetitivas.
Obviamente, la escritura del código HTML/CSS y JavaScript es una parte de él.
Pero la otra parte es el hecho de que si escribe
el código CSS usando uno de los lenguajes de preprocesamiento CSS, como Sass o
Less, entonces necesita convertir ese código en el código CSS correspondiente.
A partir de entonces, debe hacer un procesamiento adicional en sus
archivos CSS como la minificación, la compactación y la concatenación.
Hablaremos un poco más de esto en las próximas diapositivas.
Del mismo modo, con su código JavaScript, debe hacer
JShinting, buscando posibles errores.
Luego concatenación de varios archivos de script
e incluso uglification y el desmantelamiento del código.
Hablaremos un poco de eso en las próximas diapositivas.
Todas estas tareas son tareas repetitivas, que nos gustaría automatizar en la
medida de lo posible, para que podamos concentrarnos en el diseño real y la
construcción de nuestro sitio web, en lugar de en estas tareas repetitivas.
Para que el principio DRY, no repita el principio,
es muy esencial en este caso.
No queremos perder nuestro tiempo en tareas de combustión repetitivas
y, en cambio, tratar de automatizarlas en la medida de lo posible para
que puedan ejecutarse siempre que sea necesario.
Hablemos de algunas de estas tareas repetitivas con un poco más de detalle.
Tomemos el ejemplo de CSS como un caso.
Cuando escribimos código CSS, a menudo escribimos el código
usando uno de los lenguajes de preprocesamiento como Less o Sass.
Ahora, una vez que el código está escrito, entonces necesita ser convertido en CSS mediante el uso
de uno de los preprocesadores como hemos visto en la lección anterior.
Allí, es posible que tengamos que hacer algún prefijo específico del proveedor para
nuestro código CSS para abordar los problemas que podrían surgir con varios navegadores.
Así que aquí es donde se usa la tarea de hacer auto-prefijo,
por lo que esto se puede hacer automáticamente para nosotros.
Del mismo modo, una vez que su código CSS está escrito, obviamente,
la forma en que escribimos el código CSS es ser humanamente legible.
Pero para una máquina, realmente no le importa si hay suficientes espacios
entre el código o si está formateado correctamente o no.
Por lo tanto, la minificación es el proceso de eliminar todos los caracteres innecesarios,
el espacio en blanco, las líneas nuevas, los comentarios, de su código CSS.
Para que su resultado final sea un archivo muy compacto con un número mínimo
de caracteres, por lo que se puede servir muy, muy rápidamente.
Pero al mismo tiempo,
desea preservar la funcionalidad que diseñó en su código CSS.
Del mismo modo, puede distribuir su código CSS en muchos archivos
mientras diseña y construye su sitio web.
Es posible que desee concatenar todos ellos en un único archivo CSS al final, de
modo que sólo un único archivo CSS necesita ser descargado
por el navegador cuando está renderizando su sitio web.
Por lo tanto, la concatenación es
otra tarea que está involucrada cuando está construyendo su sitio web.
Del mismo modo, cuando escribas código JavaScript, ya sea puro JavaScript
o jQuery o uno de los marcos que usaremos en
los futuros cursos de esta especialización, necesitarías escribir código JavaScript.
Así que una vez que haya escrito el código JavaScript, querrá poder verificar
el código JavaScript en busca de errores y posibles problemas.
Cosas como punto y coma faltantes,
uso inadecuado del lenguaje, y así sucesivamente, así que lo que llamamos como análisis de código estático.
Así que si desea poder realizar esto, incluso antes de implementar nuestro
sitio web en el servidor web.
Del mismo modo, podríamos organizar nuestro código en varios archivos JavaScript.
Cuando realmente implementamos, es posible que deseemos concatenar todos estos archivos en
un único archivo JavaScript y luego usarlo en nuestras páginas web.
Y esta concatenación se puede hacer automáticamente.
Del mismo modo, la uglificación del código JavaScript, que significa
la minificación, lo que significa eliminar todos los espacios
en blanco innecesarios y comentarios, etc.
Y desmantelamiento del código, lo que significa reducir los nombres de las
variables locales a letras simples siempre que sea posible.
Ahora, desde la perspectiva de una computadora,
realmente no le importa cómo se vea el código, siempre y cuando funcione correctamente.
Para el formato legible por humanos, obviamente escribimos código de una
manera mucho más elaborada, por lo que es más fácil para nosotros seguir lo que está haciendo el código.
Por lo tanto, cuando realmente implementa,
es posible que desee eliminar todas las características extrañas de su código.
Y luego compactarlo para que se sirva la cantidad mínima de código.
Al mismo tiempo, una vez finalizado el
proceso de concatenación y uglificación de JShint,
es posible que desee asegurarse de que el código resultante siga funcionando correctamente.
Por lo tanto, es posible que desee volver a comprobar su código en busca de posibles errores.
CSS y JavaScript son dos aspectos importantes de su desarrollo web
a los que obviamente debe prestar mucha atención.
Pero hay muchas otras tareas más pequeñas que debe realizar
antes de que su sitio web esté listo para su implementación.
Es posible que incluya muchas imágenes en sus páginas web.
Una vez que su sitio web esté listo, es posible
que desee compactar esas imágenes para optimizar el tamaño de los archivos, de modo
que sus imágenes sean archivos de tamaño mínimo para ser implementados.
Del mismo modo, mientras está haciendo desarrollo, puede estar haciendo modificaciones,
por ejemplo, a sus archivos Sass o a su código JavaScript.
Cuando se realizan dichas modificaciones,
desea poder llevar a cabo automáticamente esas tareas,
como las tareas de concatenación, minificación y uglificación.
Así que podríamos usar tareas de vigilancia,
cuyo trabajo principal es vigilar todos estos archivos.
Y si se realiza algún cambio en estos archivos,
las tareas se ejecutarán automáticamente.
Esto liberará mucho de nuestro tiempo de hacer tareas repetitivas manualmente.
Veremos algo de esto con más detalle en los ejercicios que siguen.
Otro aspecto, mientras está haciendo su desarrollo,
es poder servir su código y
ver el código en su navegador.
Así que hemos visto el uso del servidor en vivo en nuestro desarrollo anterior,
donde teníamos el servidor funcionando y sirviendo el código.
Para que podamos ver los cambios que hacemos instantáneamente
siendo renderizados en el navegador.
Por lo tanto, para esto, necesitamos servidor y mecanismo de carga de vida, y el
servidor en vivo que vimos anteriormente es un ejemplo de cómo podemos lograr esto.
Finalmente, si está escribiendo código, obviamente necesita llevar a cabo pruebas
de su código, lo que, en el caso de Bootstrap, es mucho menos considerado.
Pero a medida que pasa a usar varios marcos de JavaScript,
las pruebas se convierten en una tarea igualmente importante.
Por último, desea poder realizar todas estas tareas y, a
continuación, crear el código de implementación final que se puede cargar en su
servidor web para que su sitio web esté disponible para el público en general.
Los pasos implicados en la construcción de su sitio para la implementación, lo que llamamos
construir los archivos de distribución, también es una tarea igualmente importante.
Vamos a ver algunos de ellos a través de ejemplos en el siguiente ejercicio y
también la siguiente lección donde vamos a ver a los corredores de tareas.
[ MÚSICA]