1
00:00:00,089 --> 00:00:04,955
[Sonido]

2
00:00:04,955 --> 00:00:08,311
Ya pasaron los días en los
que un sitio web se usaba solo

3
00:00:08,311 --> 00:00:11,385
para dar información
a los usuarios.

4
00:00:11,385 --> 00:00:16,380
Ahora, en la mayoría de los sitios web,
los usuarios pueden interactuar con el sitio web

5
00:00:16,380 --> 00:00:21,360
para suministrar información, por ejemplo
clicando botones o rellenando formularios,

6
00:00:21,360 --> 00:00:26,240
escribiendo algo en las
cajas de búsqueda, etcétera.

7
00:00:26,240 --> 00:00:29,940
¿Cómo soportamos este tipo de
interacciones con los usuarios?

8
00:00:29,940 --> 00:00:35,900
Eso es lo que vamos a tratar
en esta lección en particular

9
00:00:35,900 --> 00:00:38,333
y en el ejercicio
a continuación.

10
00:00:38,333 --> 00:00:43,880
Como ejemplo, si visitas el sitio
web de Coursera, verás que tiene

11
00:00:43,880 --> 00:00:49,091
botones arriba que puedes
clicar para ir a distintos lugares.

12
00:00:49,091 --> 00:00:54,954
Tiene una caja de búsqueda en la que
puedes introducir información para buscar,

13
00:00:54,954 --> 00:01:01,880
digamos por ejemplo, full stack
web development, etcétera.

14
00:01:01,880 --> 00:01:08,286
Notamos que la interacción con
el usuario necesita ser soportada

15
00:01:08,286 --> 00:01:14,808
en los sitios web usando muchos
enfoques diferentes, que incluyen botones,

16
00:01:14,808 --> 00:01:20,054
formularios, cajas de texto, casillas
de verificación, y muchos otros.

17
00:01:20,054 --> 00:01:25,710
Las primeras interacciones con los sitios web
se proporcionaban mediante hiperenlaces.

18
00:01:25,710 --> 00:01:29,852
Podías clicar en un hiperenlace
para ir a otros lugares, etcétera, pero

19
00:01:29,852 --> 00:01:31,046
obviamente,

20
00:01:31,046 --> 00:01:35,559
un hiperenlace es solo uno de los muchos
métodos de interacción con tu sitio web.

21
00:01:35,559 --> 00:01:40,335
Puedes tener botones incluidos en
el sitio web que, al ser clicados,

22
00:01:40,335 --> 00:01:44,580
producirán alguna
acción en el sitio web.

23
00:01:44,580 --> 00:01:49,900
Puedes tener formularios que rellenas
para suministrar información al sitio web.

24
00:01:49,900 --> 00:01:54,500
Cuando miras cómo
incluir esas interacciones

25
00:01:54,500 --> 00:01:58,660
con el usuario en tu sitio web,
verás que puedes usar algo

26
00:01:58,660 --> 00:02:03,930
como los tags a que son
útiles para proveer hiperenlaces,

27
00:02:03,930 --> 00:02:10,100
Luego tienes los tags button que te
permiten incluir botones en tu sitio web.

28
00:02:10,100 --> 00:02:15,060
Vamos a ver cómo
formateamos esos tags <a>

29
00:02:15,060 --> 00:02:19,850
en los tags button usando clases de bootstrap
de modo que puedas darles el estilo

30
00:02:20,910 --> 00:02:24,775
para simular el tema
general de Bootstrap.

31
00:02:25,785 --> 00:02:30,075
HTML ya incluye los
elementos form e input.

32
00:02:30,075 --> 00:02:34,640
Veremos cómo Bootstrap mejora
estos elementos proporcionando

33
00:02:34,640 --> 00:02:40,310
características de estilo para formularios
y otros elementos que van dentro de form.

34
00:02:40,310 --> 00:02:45,950
Los botones obviamente proporcionan una
forma simple de interactuar con tu sitio web.

35
00:02:45,950 --> 00:02:49,600
Cuando tienes un botón en tu
sitio web, puedes pasar por encima,

36
00:02:49,600 --> 00:02:55,100
clicar en él y esperar que
pase algo en el proceso.

37
00:02:55,100 --> 00:02:59,830
El comportamiento del botón depende
de dónde esté posicionado en Bootstrap.

38
00:02:59,830 --> 00:03:03,060
Si el botón está dentro
de un form, por ejemplo,

39
00:03:03,060 --> 00:03:08,280
en general al clicarlo provocará
que el formulario se envíe al servidor,

40
00:03:08,280 --> 00:03:13,270
o que la información del
formulario sea cancelada.

41
00:03:13,270 --> 00:03:19,200
Un botón fuera de un form puede
tener otras formas de interacción.

42
00:03:19,200 --> 00:03:24,589
De igual forma, el tag <a> que,
tradicionalmente, hemos asociado

43
00:03:25,690 --> 00:03:31,550
con hiperenlaces puede también
ser capturado para darle estilo

44
00:03:31,550 --> 00:03:34,170
y presentarlo en
forma de botón.

45
00:03:34,170 --> 00:03:39,356
Veremos cómo Bootstrap
provee clases que pueden

46
00:03:39,356 --> 00:03:46,580
usarse para convertir el tag <a> en un
botón para ser presentado en tu sitio web.

47
00:03:46,580 --> 00:03:51,600
Veremos también varios elementos
de un form, como input,

48
00:03:51,600 --> 00:03:56,390
select, button y también
los elementos textarea,

49
00:03:56,390 --> 00:04:03,320
y cómo usarlos dentro de
nuestros forms para diseñar

50
00:04:03,320 --> 00:04:09,660
y construir un formulario que pueda
ser incluido en nuestro sitio web.

51
00:04:09,660 --> 00:04:13,640
El ejercicio a continuación de
esta lección te introducirá

52
00:04:13,640 --> 00:04:17,440
al soporte que da Bootstrap
para dar estilo a los botones,

53
00:04:17,440 --> 00:04:22,670
y también cómo varios elementos
de form pueden ser mejorados

54
00:04:22,670 --> 00:04:27,730
usando clases Bootstrap para presentar
los formularios clásicos de Bootstrap.