1
00:00:03,260 --> 00:00:09,800
Bienvenido a front end Web UI 
Frameworks and Tools: Bootstrap 4.

2
00:00:09,800 --> 00:00:13,565
Me alegra que hayas decidido 
unirte a este curso para aprender

3
00:00:13,565 --> 00:00:18,265
sobre el más popular Front 
end Web UI Framework: Bootstrap.

4
00:00:18,265 --> 00:00:20,995
Vamos a ver varios 
aspectos de Bootstrap.

5
00:00:20,995 --> 00:00:29,520
A través de varios ejemplos, aprenderás
 haciendo ejercicios como parte de este curso.

6
00:00:29,520 --> 00:00:32,900
Veremos algunos 
detalles a continuación.

7
00:00:32,970 --> 00:00:35,890
Antes de comenzar
 este curso,

8
00:00:35,890 --> 00:00:38,760
asegúrate de tener
 suficiente experiencia

9
00:00:38,760 --> 00:00:41,625
para poder tener
 éxito en este curso.

10
00:00:41,625 --> 00:00:44,455
Deberías tener un buen
 conocimiento de HTML,

11
00:00:44,455 --> 00:00:48,920
CSS y JavaScript antes
 de comenzar porque,

12
00:00:48,920 --> 00:00:54,225
desde mi perspectiva, el diseño y 
desarrollo web consta de dos aspectos;

13
00:00:54,225 --> 00:00:58,320
uno es el diseño del 
sitio web y la página web,

14
00:00:58,320 --> 00:01:04,610
el segundo es la construcción e
 implementación real de la página web.

15
00:01:04,610 --> 00:01:06,845
Desde la perspectiva
 del diseño,

16
00:01:06,845 --> 00:01:13,625
significa el diseño de la interfaz 
de usuario y la experiencia del usuario,

17
00:01:13,625 --> 00:01:16,815
el diseño visual, la
 creación de prototipos,

18
00:01:16,815 --> 00:01:20,164
los elementos de colores,

19
00:01:20,164 --> 00:01:23,815
gráficos y animaciones 
que puedan ser interesantes.

20
00:01:23,815 --> 00:01:29,645
En esta especialización, no vamos a 
ver este aspecto del desarrollo web.

21
00:01:29,645 --> 00:01:32,650
En cambio, vamos a ver
 el segundo aspecto,

22
00:01:32,650 --> 00:01:34,680
que es el desarrollo,
 construcción,

23
00:01:34,680 --> 00:01:40,825
e implementación del sitio web en
 las páginas utilizando tecnologías,

24
00:01:40,825 --> 00:01:45,190
como los front end web UI 
frameworks como Bootstrap,

25
00:01:45,190 --> 00:01:52,030
tal vez frameworks de JavaScript como
 Angular o una biblioteca como React

26
00:01:52,030 --> 00:01:55,700
y frameworks móviles
 híbridos para diseñar

27
00:01:55,700 --> 00:02:00,950
aplicaciones móviles y también desarrollo
 del lado del servidor usando Node.js,

28
00:02:00,950 --> 00:02:06,670
Express, MongoDB, el stack
 principal con más detalle.

29
00:02:06,670 --> 00:02:09,530
Si miras a la especialización,

30
00:02:09,530 --> 00:02:13,035
pensando en el aspecto 
de diseño del sitio web,

31
00:02:13,035 --> 00:02:16,260
entonces es posible que 
desees repensarlo nuevamente.

32
00:02:16,260 --> 00:02:19,360
Esta especialización
 se concentra en

33
00:02:19,360 --> 00:02:25,115
el desarrollo, construcción e 
implementación de sitios web y páginas web,

34
00:02:25,115 --> 00:02:31,065
un conocimiento puramente
 técnico sobre el uso del HTML,

35
00:02:31,065 --> 00:02:37,310
CSS, habilidades basadas en JavaScript
 para el desarrollo real del sitio web.

36
00:02:37,310 --> 00:02:43,080
Probablemente te estarás preguntando qué
 quiere decir desarrollo web full stack.

37
00:02:43,080 --> 00:02:48,385
Veremos con más detalle el desarrollo 
web full stack, en la próxima lección.

38
00:02:48,385 --> 00:02:52,835
En particular, si estás 
mirando cómo este curso

39
00:02:52,835 --> 00:02:57,665
se posiciona en el contexto 
general del desarrollo web full stack,

40
00:02:57,665 --> 00:03:02,790
en este curso, nos ocupamos del desarrollo
 de la interfaz de usuario del front end web,

41
00:03:02,790 --> 00:03:07,565
en particular, el UI Framework Bootstrap 4.

42
00:03:07,565 --> 00:03:10,245
Vamos a ver los
 aspectos restantes

43
00:03:10,245 --> 00:03:15,845
del desarrollo web full stack en
 el resto de esta especialización.

44
00:03:15,845 --> 00:03:19,640
Este curso estudia 
Bootstrap en profundidad.

45
00:03:19,640 --> 00:03:23,640
También veremos el diseño web 
reactivo y cómo Bootstrap soporta

46
00:03:23,640 --> 00:03:27,750
el diseño web reactivo a través 
del sistema de cuadrícula Bootstrap.

47
00:03:27,750 --> 00:03:33,050
Veremos los componentes basados
en JavaScript y CSS en Bootstrap y cómo

48
00:03:33,050 --> 00:03:38,660
puedes utilizarlos para construir 
tu sitio web y tus páginas web.

49
00:03:38,660 --> 00:03:45,200
Por el camino, aprenderemos el 
desarrollo web usando la línea de comandos,

50
00:03:45,200 --> 00:03:48,570
aprenderemos muchas 
herramientas web que están

51
00:03:48,570 --> 00:03:52,635
basadas en la línea de comandos
 y en el ecosistema Node.js.

52
00:03:52,635 --> 00:03:54,630
Lo repasaremos brevemente,

53
00:03:54,630 --> 00:04:03,355
Node.js y las herramientas basadas en Node.js,
 incluidas los ejecutadores de tareas como Grunt y Gulp.

54
00:04:03,355 --> 00:04:08,235
Este curso está estructurado
 en módulos completos.

55
00:04:08,235 --> 00:04:12,195
Cada módulo corresponde aproximadamente
 a una semana de trabajo,

56
00:04:12,195 --> 00:04:13,830
En el primer módulo,

57
00:04:13,830 --> 00:04:17,795
obtendremos una vista general
 del desarrollo web full stack,

58
00:04:17,795 --> 00:04:22,895
luego tendrás una introducción
 rápida a Git y Node.js.

59
00:04:22,895 --> 00:04:29,450
Luego presentaremos Bootstrap y
 revisaremos el sistema de cuadrícula Bootstrap.

60
00:04:29,450 --> 00:04:34,180
Eso te llevará a la primera
 tarea práctica de este curso.

61
00:04:34,180 --> 00:04:38,520
El segundo módulo se ocupa de
 los componentes CSS de Bootstrap.

62
00:04:38,520 --> 00:04:42,445
Veremos el diseño de la barra
 de navegación de Bootstrap

63
00:04:42,445 --> 00:04:46,875
y cómo podemos usarla
 para apoyar la navegación.

64
00:04:46,875 --> 00:04:51,565
Veremos las entradas 
del usuario a través

65
00:04:51,565 --> 00:04:58,649
de botones y formularios, luego vemos
 cómo mostrar contenido usando tablas y tarjetas.

66
00:04:58,649 --> 00:05:06,340
Luego veremos cómo podemos incluir imágenes
 y media en nuestra página web usando imgs,

67
00:05:06,340 --> 00:05:08,590
thumbnails y objetos media.

68
00:05:08,590 --> 00:05:13,095
Y luego, finalmente, miramos cómo alertar
 a los usuarios usando etiquetas,

69
00:05:13,095 --> 00:05:14,680
alertas y barras de progreso.

70
00:05:14,680 --> 00:05:19,615
Esto te conducirá 
a la segunda tarea.

71
00:05:19,615 --> 00:05:25,425
El tercer módulo se ocupa de los 
componentes de JavaScript en Bootstrap.

72
00:05:25,425 --> 00:05:27,980
Haremos una vista panorámica

73
00:05:27,980 --> 00:05:32,930
de cómo funciona los componentes JavaScript
 de Bootstrap, revisaremos las pestañas,

74
00:05:32,930 --> 00:05:34,635
píldoras y navegación
 con pestañas,

75
00:05:34,635 --> 00:05:40,874
luego veremos cómo se pueden usar collapse 
y accordion para mostrar y ocultar contenido.

76
00:05:40,874 --> 00:05:43,730
Y luego veremos 
el uso de tooltips,

77
00:05:43,730 --> 00:05:48,610
popovers y modals para revelar el 
contenido que se mostrará en tu página.

78
00:05:48,610 --> 00:05:52,230
Y luego veremos el 
componente carousel,

79
00:05:52,230 --> 00:05:58,235
que te permite mostrar información
 deslizante en tu página web.

80
00:05:58,235 --> 00:06:02,670
Esto te conducirá a la tercera
 tarea práctica en este curso.

81
00:06:02,670 --> 00:06:11,625
El último módulo trata sobre Bootstrap y
 JQuery y varias herramientas de desarrollo.

82
00:06:11,625 --> 00:06:17,070
En particular, veremos cómo interactúan
 Bootstrap y JQuery y cómo puedes

83
00:06:17,070 --> 00:06:23,535
escribir código JQuery y JavaScript para 
controlar tu componente JavaScript de Bootstrap.

84
00:06:23,535 --> 00:06:28,230
Vemos los diversos métodos que son soportados
 por los componentes de JavaScript de Bootstrap,

85
00:06:28,230 --> 00:06:31,510
que se pueden 
aprovechar para escribir

86
00:06:31,510 --> 00:06:35,735
código JavaScript para controlar el 
comportamiento de esos componentes.

87
00:06:35,735 --> 00:06:44,509
Luego veremos el lenguaje de 
preprocesamiento CSS que es como Less y Sass.

88
00:06:44,509 --> 00:06:49,675
Luego, finalmente, veremos cómo podemos 
construir e implementar nuestro sitio web

89
00:06:49,675 --> 00:06:57,345
usando scripts de NPM o ejecutadores
 de tareas como Grunt y Gulp.

90
00:06:57,345 --> 00:07:03,485
Esto debe llevarte a la 
tarea final de este curso.

91
00:07:03,485 --> 00:07:06,990
Espero que te diviertas
 mucho siguiendo

92
00:07:06,990 --> 00:07:12,920
las diferentes partes de este curso y
 que también disfrutes de los ejercicios que

93
00:07:12,920 --> 00:07:16,850
encuentres en cada etapa 
que te permitan entender

94
00:07:16,850 --> 00:07:23,430
mejor los varios aspectos del framework
 de la interfaz de usuario web Bootstrap.