[Sonido]
Ya pasaron los días en los que un sitio web se usaba solo
para dar información a los usuarios.
Ahora, en la mayoría de los sitios web, los usuarios pueden interactuar con el sitio web
para suministrar información, por ejemplo clicando botones o rellenando formularios,
escribiendo algo en las cajas de búsqueda, etcétera.
¿Cómo soportamos este tipo de interacciones con los usuarios?
Eso es lo que vamos a tratar en esta lección en particular
y en el ejercicio a continuación.
Como ejemplo, si visitas el sitio web de Coursera, verás que tiene
botones arriba que puedes clicar para ir a distintos lugares.
Tiene una caja de búsqueda en la que puedes introducir información para buscar,
digamos por ejemplo, full stack web development, etcétera.
Notamos que la interacción con el usuario necesita ser soportada
en los sitios web usando muchos enfoques diferentes, que incluyen botones,
formularios, cajas de texto, casillas de verificación, y muchos otros.
Las primeras interacciones con los sitios web se proporcionaban mediante hiperenlaces.
Podías clicar en un hiperenlace para ir a otros lugares, etcétera, pero
obviamente,
un hiperenlace es solo uno de los muchos métodos de interacción con tu sitio web.
Puedes tener botones incluidos en el sitio web que, al ser clicados,
producirán alguna acción en el sitio web.
Puedes tener formularios que rellenas para suministrar información al sitio web.
Cuando miras cómo incluir esas interacciones
con el usuario en tu sitio web, verás que puedes usar algo
como los tags a que son útiles para proveer hiperenlaces,
Luego tienes los tags button que te permiten incluir botones en tu sitio web.
Vamos a ver cómo formateamos esos tags
en los tags button usando clases de bootstrap de modo que puedas darles el estilo
para simular el tema general de Bootstrap.
HTML ya incluye los elementos form e input.
Veremos cómo Bootstrap mejora estos elementos proporcionando
características de estilo para formularios y otros elementos que van dentro de form.
Los botones obviamente proporcionan una forma simple de interactuar con tu sitio web.
Cuando tienes un botón en tu sitio web, puedes pasar por encima,
clicar en él y esperar que pase algo en el proceso.
El comportamiento del botón depende de dónde esté posicionado en Bootstrap.
Si el botón está dentro de un form, por ejemplo,
en general al clicarlo provocará que el formulario se envíe al servidor,
o que la información del formulario sea cancelada.
Un botón fuera de un form puede tener otras formas de interacción.
De igual forma, el tag que, tradicionalmente, hemos asociado
con hiperenlaces puede también ser capturado para darle estilo
y presentarlo en forma de botón.
Veremos cómo Bootstrap provee clases que pueden
usarse para convertir el tag en un botón para ser presentado en tu sitio web.
Veremos también varios elementos de un form, como input,
select, button y también los elementos textarea,
y cómo usarlos dentro de nuestros forms para diseñar
y construir un formulario que pueda ser incluido en nuestro sitio web.
El ejercicio a continuación de esta lección te introducirá
al soporte que da Bootstrap para dar estilo a los botones,
y también cómo varios elementos de form pueden ser mejorados
usando clases Bootstrap para presentar los formularios clásicos de Bootstrap.