Construcción de interfaces de usuario, usando: Bootstrap 4, HTML, Imágenes

Transcripción

1 Tema. Construcción de interfaces de usuario, usando: Bootstrap 4, HTML, Imágenes Objetivos. Objetivo General o Aprender como instalar, configurar y el uso de Bootstrap 4 en nuestros proyectos Objetivos específicos o Instalar Bootstrap en nuestro proyecto o Conocer las clases más usadas en Bootstrap o Usar Bootstrap en nuestras páginas web o Desarrollar ejemplos de uso de las clases de Bootstrap o Desarrollar ejercicios usando Bootstrap para que nuestras páginas web se vean con estilo. Material a utilizar. Editor de texto de su preferencia algunos ejemplos: o Notepad++ o Sublime Text o Phpstorm o Entre otros Navegadores web soportados o Chrome o Firefox o Opera o Safari e Internet Explorer a partir de la versión 8 Bootstrap 4 Para desarrollar este tema usaremos Sublime Text como nuestro editor de texto y como navegador Firefox. Pueden descargar Sublime Text en esta dirección: para el navegador Firefox si nuestra computadora no lo posee no se preocupe puede trabajar con Chrome sin ningún inconveniente o en cualquier navegador que su computadora posea. 1

2 Para el uso del framework Bootstrap 4, existen diferentes formas de descargarlo, pero nosotros usaremos Compiled CSS and JS descargar de su página oficial: Sigue los pasos como se muestra en las imágenes siguientes: En la opción Compiled CSS and JS y damos clic en Download esta es la versión lista para usar Creamos una carpeta donde tendremos todos los archivos que vamos ir realizando en este caso la llamaremos Bootstrap_4 dentro de ella crearemos las siguientes sub carpetas css, js para los archivos JavaScript y jquery que vayamos a necesitar, y img que contendrán las imágenes que utilizaremos, y estamos listos para comenzar 2

3 Luego de esto la descarga que hicimos de Bootstrap4 bootstrap dist.zip copiamos y descomprimimos la carpeta siempre dentro de la que acabamos de crear Bootstrap_4, en ella se encuentran dos archivos uno css de este los que más utilizaremos son: bootstrap y bootstrap.min, y la otra carpeta es js. Cortamos estas carpetas y pegamos en Bootstrap_4, posiblemente nos muestre un mensaje como este: al cual daremos clic en sí. Con esto ya tenemos instalado Bootstrap4 en nuestra carpeta. Introducción. Bootstrap es el marco de front-end gratuito más popular para el desarrollo rápido de aplicaciones Web y sitios Web. Bootstrap incluye plantillas de diseño basadas en HTML y CSS para tipografía, formularios, botones, tablas, navegación, modales, carruseles de imagen y muchos otros, así como complementos de JavaScript opcionales Bootstrap también le brinda la capacidad de crear fácilmente diseños receptivos. Qué es el diseño web receptivo? El diseño web receptivo se trata de crear sitios web que se ajustan automáticamente para verse bien en todos los dispositivos, desde teléfonos pequeños hasta grandes escritorios. Haciendo uso la mayor parte de los siguientes elementos: Sistema de rejilla El sistema de rejilla de Bootstrap se basa en la creación o disposición del contenido de nuestra web dentro de rejillas flexibles, las cuales se escalarán al tamaño y posición adecuada de forma automática dependiendo del tamaño de la pantalla. Funcionamiento del sistema de rejilla 3

4 El sistema de rejilla está pensado para ayudarnos en la disposición de los contenidos de nuestra web y su adaptación a los diferentes tamaños de pantalla de forma automática. Elemento contenedor El sistema de rejilla tiene que ser utilizado dentro de uno de los dos elementos contenedores que provee Bootstrap: container o container-fluid. Es importante tener en cuenta que estos elementos se utilizan como raíz de la rejilla y no se podrán anidar unos dentro de otros. Clases básicas y más usadas CLASE DESCRIPCIÓN.btn Mediante la clase. btn podemos aplicar estilo a los elementos tipo button. Esta clase la podemos combinar con. btn-primary,.btn-secondary,.btnsuccess,.btn-danger,.btnwarning,.btn-info,.btn-light,.btn-dark o.btn-link para crear botones para diferentes estados o acciones en nuestros formularios..container Contenedor de ancho fijo con anchos determinados por los sitios de pantalla. Igual margen a la izquierda y a la derecha..h1 -.h6 Hace que un elemento se parezca a un encabezado de la clase elegida (h1-h6).form-group Contenedor para entrada de formulario y etiqueta en grupo..row Contenedor para columnas receptivas, o columnas anidadas col-sm-4 Rejillas receptivas, columnas de 1-12 de tramo..rounded-circle forma un elemento en un círculo (no es compatible con IE8 y versiones anteriores).jumbotron Crea un encabezado / caja gris acolchada con esquinas redondeadas que aumenta el tamaño de las fuentes del texto dentro de él. Se usa para llamar atención adicional a algún contenido especial o información..navbar Crea una barra de navegación.dropdown-menu Agrega los estilos predeterminados para el contenedor del menú desplegable.dropdown-item Crea un elemento desplegable (agregado a enlaces o botones dentro de.dropdownmenu).dropdown-toggle Se usa en el botón que debe ocultar y mostrar (alternar) el menú desplegable.card-body Contenedor para contenido de la tarjeta Estas y muchas clases más las podemos encontrar en la página oficial de bootstrap: 4

5 Procedimiento. Lo primero que aremos es crear un nuevo archivo en Sublime Text el cual guardaremos siempre en la carpeta Bootstrap_4 y le pondremos el nombre de index.html, y colocaremos el siguiente código donde se usan clases de bootstrap. Para poder usar bootstrap accedemos a la carpeta css donde guardamos todos los estilos de bootstrap y luego al archivo bootstrap.min es muy importante que estemos seguros de la ruta y nombre correcto por que serán nuestras referencias <link rel="stylesheet" href="css/bootstrap.min.css" >. Algunos componentes necesitaran de JavaScript que son los archivos que están en la carpeta js lo relacionamos, antes de nuestro <body> agregaremos la etiqueta de <script src=" "></script> y primero que nada tenemos que acceder a jquery la cual podemos descargar desde el cual guardaremos con el mismo nombre en la carpeta js, (veremos una guía sobre esto en otro laboratorio) luego lo llamamos desde nuestra página así Y ahora si podemos hacer uso de todos los componentes de bootstrap sin ningún inconveniente, lo mejor de todo es que puede usarlo con diferentes tipos de lenguajes. 5

6 La etiqueta <meta name="viewport" content="width=device-width, minimum-scale=1, maximumscale=1"/> que hemos agregado es para que nuestra aplicación se vea bien en cualquier navegador, o dispositivo. agregamos contenido haciendo uso de la clase de bootstrap container la que nos permitirá encerrar nuestro contenido de la página para poder centrarla, también colocamos un <h1>mi primera página de Bootstrap 4</h1> y un párrafo <p> Minimiza la página para que veas el efecto de responsivo!</p>, además hemos creado un botón usando también una clase de bootstrap <button type="button" class="btn btn-success">boton</button>, asimismo hemos creado más elementos para nuestra página como un pequeño formulario. 6

7 Por ultimo usaremos otro elemento de bootstrap para crear una nueva página que nos muestra cómo usar tarjetas de bootstrap. Llamaremos la página nuevaexperiencia.html y colocar el siguiente código: Se nos mostrara: 7

8 Para probar tu código da clic en Valida tu Código y escoge como quieres hacer para validar tu código, desde un archivo una url o el código directamente que es el que se les recomienda, pegar el código en la ventana y luego dar en check o comprobar. EJERCICIOS A DESARROLLAR 1. Haz que las paginas tengan el mismo menú para que puedas acceder a ellas sin ningún problema, te quedara así: 8

9 2. Crea una nueva página html con elementos de tu elección y has que se muestre dando clic en Hazlo tu. Y mostrara la página que tú hayas creado. Solamente hazlo en la página principal. 3. Haz un nuevo elemento en el menú que diga inicio, hazlo en la página del formulario al dar clic sobre este tiene que mostrarte la página principal de tu sitio. 9

10 Referencias. y. ( ). Bootstrap. Obtenido de Libros Web. ( ). Obtenido de Moisset, D. (s.f.). Tutoriales Programación Ya. Obtenido de Bootstrap 4 ya: w3big. (s.f.). w3big.com. Obtenido de intro.html W3Schools. ( ). W3Schools. Obtenido de 10