Diseño web fácil: aprende Bootstrap Studio en 12 horas

1. Introducción: Hola allá y bienvenidos a este curso. En este curso, vamos a aprender todo sobre el software de escritorio llamado bootstrap Studio. Bootstrap Studio es un front-end de arrastrar y soltar o diseñador de sitios web. Podemos usarlo para crear fácilmente sitios web hermosos y receptivos sin la necesidad de escribir ningún código. En esta clase, estaremos creando un sitio web responsive al igual que éste. Empezaremos el curso aprendiendo los fundamentos mismos de HTML y CSS. Tener una comprensión de estos conceptos básicos hará que los capítulos restantes sean mucho más fáciles de seguir. A continuación, nos familiarizaremos con la interfaz de usuario, aprendimos a agregar algún contenido y formato sencillos. Y después de eso, aprenderemos a agregar algunos componentes más avanzados como la barra de navegación y un carrusel y más. Aprenderemos sobre el uso de filas y columnas para crear cuadrícula responsive. Y aprenderemos sobre el estilo personalizado. También aprenderemos sobre el punto negro, y aprenderemos a crear nuestro propio componente personalizado, y aprenderemos a agregar componentes interactivos. Por último, aprenderemos a publicar nuestro sitio web en un dominio gratuito de Bootstrap studio para seguir este curso, primero, asegúrate de tener un bootstrap Studio instalado en tu computadora. Se puede el software desde este sitio web. Este curso está diseñado para ser accesible a personas que no tienen experiencia en diseño web ni ningún tipo de codificación de experiencia. Si ya tienes algo de experiencia, eso es genial y probablemente podrás acelerar el curso. Pero aunque seas un principiante completo, este curso es accesible para ti. Solo necesitas un poco de paciencia y persistencia y estarás haciendo hermosos sitios web responsivos en poco tiempo. Entonces, ya sea que quieras crear un sitio web para tu pequeña empresa o simplemente te gustaría crear algo para tu afición. O incluso si simplemente te interesa aprender algo nuevo, entonces empecemos. 2. Proyecto de clase y cómo seguir este curso: Este curso está estructurado en 12 capítulos de tamaño bit, comenzando de forma sencilla y haciéndose progresivamente más avanzado. Por regla general, cada capítulo debería tardar, muy en términos generales, alrededor de una hora en completarse. Pero por supuesto, cada individuo es diferente y lo mejor es estudiar a tu propio ritmo. Si eres un aprendiz lento y estable al que le gusta entender todo perfectamente como yo, podrías tomarte un poco más y eres, si eres uno de esos aprendices que simplemente zoom fluido, probablemente seas un poco más rápido. Cómo sigues el curso depende completamente de ti. Pero sí te recomiendo que lo sigas en el orden dado. Y te recomiendo que sigas junto con todos los ejemplos para conseguir alguna experiencia práctica. Cuando te sigues, lo mejor es no copiarme con precisión, sino usar tu propia creatividad e ingenio para darle tu propio estilo a las cosas. Experimentar y jugar con las cosas es una gran manera de aprender cosas nuevas. Al ser nuestro proyecto de clase, debes utilizar las herramientas que hemos aprendido para crear tu propio sitio web simple o elaborado. O alternativamente, podría construir su propio componente personalizado. Por ejemplo, podrías diseñar tu propio pie de página o encabezado, o un reloj, o una plantilla para un CV o curriculum vitae o lo que quieras mientras trabajas para el curso, Es una buena idea tener en el fondo de tu mente lo que podrías querer crear como un proyecto de aula. Dependiendo de cuánto te gustaría salir de este curso, puedes hacer que tu proyecto sea tan sencillo o tan elaborado como te gustaría. Pero sí te recomiendo encarecidamente que compartas al menos un proyecto, porque crear tu propio proyecto requiere mucho aprendizaje activo, que es una forma mucho mejor de aprender que el aprendizaje pasivo, obtienes de solo ver las explicaciones. Y además, estoy súper ansioso por ver lo que se te ocurrió. Cuando termines con el proyecto. Publíquelo en un dominio gratuito de estudio Bootstrap. Publicar un enlace como proyecto. De hecho, siéntete libre de subir un proyecto siempre que sientas que necesitas comentarios o incluso si solo quieres presumir de lo que has creado. Por lo que con ganas de ver tu proyecto, nos vemos en el siguiente video. 3. Hora 1: HTML explicado: Html significa Lenguaje de marcado de hipertexto. Un archivo HTML es simplemente un archivo de texto plano, que puede ser escrito fácilmente por un ser humano y también puede ser fácilmente comprendido por cualquier navegador web. Para crear un archivo HTML simple. Sigue el siguiente par de pasos. Inicia un sencillo editor de texto y crea un nuevo archivo. Por ejemplo, en Windows podrías usar el Bloc de notas. Estoy en Linux, así que voy a usar g edit, guardar el archivo como simple página dot HTML en una carpeta conveniente en tu disco duro. Añada el siguiente texto. Encuentra el archivo y ábrelo con tu navegador web favorito. Azulea ese editor de texto y un navegador web lado a lado en el monitor, deberías obtener unos resultados similares a éste. Probablemente te hayas dado cuenta de algunas cosas interesantes. El fuego comienza con un corchete, corchete HTML, y termina con el mismo excepto con una barras inversa frente a la parte HTML. Estos son ejemplos de etiquetas. El primer tag sin una barras inversa es una etiqueta de inicio. El tag con la barras inversa es etiqueta de fin. Todo entre estas dos etiquetas es código HTML. Uno, hemos usado una espiral con el navegador. Sólo vemos el texto entre las dos etiquetas, y no las vemos por sí mismas. A continuación, modifique el texto agregando otro par de etiquetas. A continuación, refresca el navegador. Se puede ver lo que han hecho las etiquetas p y slash B? Eso es correcto. Han hecho audaz el texto entre los dos. A continuación, eso se modifica. El expediente así. A ver si puedes detectar todas las etiquetas que estamos usando y ver si puedes adivinar qué hacen. Los tengo a todos. Aquí un jefe de resumen. Todo entre estas dos etiquetas es información sobre la página web sin ser parte de la propia página web. Aquí se puede poner todo tipo de información. Por ejemplo, en este caso, pongo el título de la página web. Los navegadores suelen poner el título de la página web aquí arriba en la pestaña. También tenemos estas dos etiquetas de cuerpo. Todo entre estas dos etiquetas forma parte del cuerpo o la parte principal de la página web, la cual contiene el contenido de la página web. Uno significa que los textos entre estas dos etiquetas es un encabezamiento. 1 es el tipo de rubro más importante, pero también se tienen encabezados menos importantes como el rumbo a rubro PRE, etcétera. P significa que el texto es un párrafo. Usted significa que el texto debe ser subrayado y yo significa que el texto debe estar en cursiva. Y básicamente eso es todo lo que hay a ello, a HTML. Todo lo que realmente es es un archivo de texto sencillo con etiquetas especiales para decirle al navegador sobre el formato especial. De hecho, hay una gran cantidad de etiquetas en HTML y puedes hacer todo tipo de cosas como cambiar el color de fondo, agregar imágenes y enlaces web y cosas por el estilo. Pero si utilizas una herramienta de autoría web de arrastrar y soltar como Bootstrap studio. No necesitas conocer ninguno de esos. Si tienes curiosidad sin embargo, si tienes una mente inquisitiva, tú, te recomiendo el sitio web www w preschools.com. Tiene algunas lecciones interactivas bastante útiles las cuales te ayudan a aprender más sobre HTML. 4. Hora 1: explicado: Usando HTML, es posible agregar bastante formato a una página web, pero esto puede ser bastante ineficiente. La mayoría de los sitios web consta de múltiples páginas, muchos párrafos y muchos encabezamientos. Entonces si establecieras el formato para cada página individual, cada encabezado individual, y cada párrafo individual, etcétera, etcétera. Tardaría mucho tiempo. Sin mencionar que si tú o tu cliente quisieran hacer un cambio, tendrías que volver a cada uno individualmente, cambiar el formato de todos y cada uno de los elementos. Entonces ahí es donde entra CSS. Css es sinónimo de Hojas de Estilo en Cascada. Y esencialmente no es más que una forma de establecer el formato para todos los animales de un estilo particular de una sola vez. Echemos un vistazo al siguiente archivo HTML. A la izquierda tenemos el archivo abierto en un editor de texto. Y a la derecha lo tenemos abierto en Firefox. Podemos ver algunas cosas. En primer lugar, nos enteramos de que soy una terrible cocinera, pero ese no es realmente el punto en este momento. En segundo lugar, vemos que fue bastante fácil utilizar párrafos y encabezamientos para configurar el contenido de este sitio web. No obstante, aún podría usar mucho formato. Entonces vamos a agregarle una hoja de estilo. Agrega un elemento de estilo al encabezado del documento. También podríamos agregar eso en un documento separado, pero para mantenerlo sencillo, sólo lo mantengamos al frente del mismo documento, escriba p para mostrar que estamos afectando sólo a los párrafos en este momento. Y usa corchetes rizados. Y entre los corchetes rizados ponemos el color a azul así, y ponemos la fuente a sans serif. El letra P le permite al navegador saber que debemos aplicar este dial o este formato a cada párrafo de la página. Entonces guardemos el archivo de texto y actualicemos el navegador. Y como se puede ver, todos los párrafos se han puesto azules. A continuación, vamos a establecer el color de fondo del cuerpo del documento en azul claro. Y pongamos la fuente del encabezado también para enviar serif. El problema es, por supuesto, que no necesariamente quieres que todos los párrafos sean iguales. A lo mejor te gustaría diferentes tipos de párrafo. En este caso. Por ejemplo, quizá te gustaría un tipo especial de formato para la prueba de introducción y un tipo especial para específicamente para las recetas. Para ello, agregamos un atributo de clase a las etiquetas relevantes. Después modificamos el código CSS para crear un formato específico para aquellas etiquetas que tienen este atributo de clase. Se puede pensar en una clase como una especie de identificador para que el navegador sepa qué tipo de formato dar a cada elemento. En primer lugar, modificamos el HTML para agregar una clase nombrada instrucciones a cada párrafo que contiene una instrucción de receta. Haga esto agregando la clase de texto es igual a instrucciones. A continuación agregamos una entrada de estilo específica para dar formato a cualquier elemento con la clase de instrucciones. Como se puede ver en el ejemplo de texto agregado sangría 40 píxeles. Esto significa que todos los textos, que tiene el atributo de clase instrucciones, estarán sangrados a la derecha por 40 píxeles, altura de línea, cinco píxeles, establecen el espaciado entre estos párrafos en cinco píxeles. color rojo establece el color del texto en rojo. Y eso es realmente todo lo que hay a ello algún código CSS simple en el elemento de estilo en la cabeza de tu documento HTML es una forma sencilla de agregar un formato elaborado, pero consistente a tu página. Y lo que es más importante, también es fácil modificar y experimentar con el estilo sin tener que cambiar el estilo y el formato de cada elemento individual. 5. Hora 1: explicado: Durante mucho tiempo, HTML y CSS fue más que suficiente para crear sitios web bastante buenos. Pero todo eso cambió cuando los teléfonos y las tabletas se convirtieron en algo común. Un sitio web que sea claro y fácil de usar en un monitor grande con un teclado y un ratón podría no ser fácil de usar en una pantalla táctil pequeña. Entonces fue entonces cuando los sitios web receptivos se hicieron populares. Con los sitios web receptivos, el diseño y el diseño del sitio web cambian dependiendo del tipo de dispositivo que estés usando para ver el sitio web. Echa un vistazo a esta página web. Cuando veo la página web en una ventana amplia, entonces tengo tres párrafos dispuestos en tres columnas. Pero cuando hago la ventana más estrecha, por ejemplo, si la estaría mirando en un teléfono, entonces los párrafos se apilan verticalmente. No necesitaba escribir dos sitios web separados para implementar esto. Acabo de usar el marco Bootstrap. Este código te muestra cómo escribí esta página web. No hace falta que nos veamos demasiado en un lado técnico de las cosas en este momento. Pero como pueden ver, tengo un enlace al marco Bootstrap en la cabecera del documento. Y tengo una serie de atributos de clase en mis elementos, que le dicen al framework Bootstrap cómo quiero que se comporten estos elementos. Por ejemplo, tengo una clase llamada contenedor y una clase llamada fila, y una clase llamada Call for. Como dije, no hace falta entrar en los detalles técnicos por ahora. Vamos a aprender más sobre cómo funciona esto en un video futuro. Entonces, ¿qué es bootstrap Studio? Bootstrap Studio es un editor de sitios web de arrastrar y soltar. El interfaz de usuario se utiliza para crear el diseño y el formato del sitio web de la misma manera que se usaría un procesador de textos para escribir un informe. Hacemos clic y arrastramos elementos como encabezados, párrafos, imágenes, enlaces, barras de herramientas, etcétera, en su lugar. El software bootstrap creará entonces todo el código HTML, CSS, y Bootstrap necesario para usted. Y esa es toda la información de fondo que necesitamos para empezar a aprender sobre el estudio Bootstrap en los próximos capítulos. Nos vemos entonces. Adiós. 6. Hora 2: interfaz de usuarios: Por lo que finalmente estamos listos para empezar a aprender sobre el estudio Bootstrap. A continuación, nos familiarizaremos con la interfaz de usuario y aprenderemos a crear una página sencilla. Pero primero, vamos a crear nuestro primer proyecto. Cuando abras Bootstrap Studio por primera vez, tendrás la opción de crear un nuevo diseño o cargar uno existente. Al hacer clic en nuevo diseño, vemos que hay muchas plantillas ya hechas para elegir. Para mantener las cosas simples, elijamos una plantilla vacía. Establece el nombre de tu proyecto, elige la última versión del framework Bootstrap y haz clic en Crear para continuar. Y luego aparece la interfaz de usuario. Veamos qué podemos ver. En primer lugar, en el medio tenemos el lienzo. Aquí es donde estaremos creando un sitio web. A la izquierda tenemos una columna. En la columna se encuentra el panel Componentes, donde podremos encontrar todo tipo de elementos. Los simples como párrafo y encabezamiento, y también los más complejos como una galería o una presentación de diapositivas o cosas así. Y debajo de eso tenemos visión general de la estructura de documentos. Este panel ofrece una visión general práctica de los elementos y componentes que se han agregado a la página. Es posible que no estés viendo esta columna, pero quizá estés viendo una lista de iconos. Si ese es el caso, simplemente puede cambiar el tamaño esta columna haciendo clic y arrastrando en el borde por aquí. Si miramos aquí arriba, vemos una fila de iconos. Estos iconos son una forma rápida de cambiar entre vistas. Por ejemplo, vista de teléfono, vista tableta, vista de escritorio. En el lado derecho, también tenemos una columna. De nuevo, si ves esto como una lista de iconos, basta con hacer clic y arrastrar para ampliar el tamaño de la columna. Y la parte superior, tenemos tres pestañas las cuales se pueden utilizar para dar formato a diferentes elementos, apariencia, opciones y animaciones. Y aquí abajo tenemos diseño. En esta pestaña, vemos los recursos asociados a la página. Esto incluye los archivos HTML, los archivos CSS, los archivos JavaScript, fuentes e imágenes. 7. Hora 2: añadir y estilizar componentes sencillos: A continuación añadiremos algún contenido básico a la página. Ve a la pestaña de estudio en la columna de la izquierda y busca rumbo. Haga clic y arrastre el erin sobre el lienzo. Verá que el encabezado aparece tanto en el lienzo también en el panel de vista general en la parte inferior de la columna izquierda. Repita el último par de pasos para agregar un párrafo debajo del encabezamiento. Seleccione un párrafo. Por encima del párrafo aparecen una serie de iconos. Mover para mover el párrafo a otra ubicación. Seleccionar padre. El padre de un elemento es elemento dentro del cual está contenido. Lo puedes encontrar fácilmente en el panel de visión general. En este caso, el elemento body es aparente del párrafo y el elemento HTML es aparente de la parte en él modifica el texto del párrafo. Duplicar, hace una copia del elemento seleccionado. Hyde hace invisible el elemento seleccionado y eliminar, elimina los elementos seleccionados. Dejemos editar el párrafo. También puedes hacer esto haciendo doble clic en el elemento en Canvas. Escribamos el siguiente texto. Aparecerá una sencilla barra de formato de texto. Y hagamos lo mismo con el dolor de cabeza. Al seleccionar el encabezado, nota una opción extra que podemos usar para establecer el nivel del encabezado. Vamos a mantenerlo en uno por ahora, y vamos a cambiar el texto para dar la bienvenida. Ahora que sabemos agregar algunos elementos básicos, Vamos también a aprender a hacer algún componente eléctrico de formato básico e ir al panel de apariencia. Vemos lo siguiente. En la parte superior del panel vemos en azul el elemento actualmente seleccionado, así como sus padres. Debajo de eso, tenemos un menú desplegable con el atributo de estilo de opción. El atributo Style nos permite formatear el bloque seleccionado actualmente. Debajo de eso tenemos todo tipo de opciones de formato categorizadas bajo diversos encabezamientos, incluyendo layout, font, etcétera. Se puede hacer clic en los triángulos para abrir o colapsar las categorías. Por lo que en primer lugar, seleccionamos el párrafo y nos aseguramos de que atributo de estilo esté seleccionado en la lista desplegable en el color de la fuente, podemos establecer el color del texto. Me dijeron color de mi fuente a azul. Puedes escoger cualquier color que te guste. A continuación, estableceremos el color de fondo de la fiesta. Seleccione un cuerpo en el panel de vista general. Bajo fondo color BG. Haga clic en el cuadrado blanco para seleccionar un color no estándar. También estableceré el color de fondo de mi fondo. Insignia de luz. Aquí hay muchas cosas más que podemos formatear. La mayoría de estas cosas son evidentes por sí mismas y aquellas que no son tan evidentes, puedes encontrar fácilmente información sobre ellas buscándolas en Google. En este curso, vamos a cubrir muchas de estas opciones, pero ninguna, todas ellas. Como saben, el sitio web que hemos hecho eventualmente será explotado a archivos HTML y CSS. Estos archivos se pueden inspeccionar con bastante facilidad en los estudios Bootstrap. En la parte inferior de la ventana verá un panel que contiene dos pestañas, HTML y estilos. Haga clic y arrastre la parte superior del borde del Panopto, tire hacia arriba. En la pestaña HTML, se ve el código HTML del documento. Haga clic en los triángulos para abrir y colapsar diferentes elementos. No es necesario entender demasiado aquí, pero ojalá reconozcas al menos algunas de las etiquetas. Al agregar nuevos componentes al lienzo, el código HTML se actualizará automáticamente. Debajo del panel HTML, hay un panel de atributos aquí puede agregar un inspect las clases de ID y otros atributos. En la pestaña Estilos se muestra todo el formato relevante para el elemento seleccionado. Al seleccionar el párrafo, verá que el elemento hereda algún estilo del padre. Y también el margen ha sido establecido por el marco Bootstrap. También vemos donde hemos coloreado la fuente azul. Entonces una cosa buena de trabajar de esta manera es que es súper fácil aprender más sobre HTML y CSS. Entonces si estás de humor curioso, solo tienes que arrastrar y soltar algo de inflexión, entra en tu página y mira cómo afecta el código. Entonces creo que es suficiente para un solo video. En el siguiente video, aprenderemos más sobre los márgenes y el relleno. Nos vemos entonces, adiós. 8. Hora 2: márgenes y Padding: Hola a todos. En este video vamos a aprender sobre los márgenes y el relleno. Márgenes y relleno, nuestras propiedades CSS básicas de trazo HTML, que podemos utilizar para modificar el diseño de los elementos y sus contenidos. Cada elemento ocupa una cierta cantidad de espacio en nuestra página. Para visualizar cuánto espacio podemos añadir fácilmente un borde y un color de fondo a cada elemento. Hagamos esto para el párrafo, primer párrafo electo, ya sea en el lienzo o en el panel de resumen, en la columna del lado izquierdo. En el panel de apariencia bajo fondo, podemos escoger un color de fondo. Yo escogería verde. Siguiente en la frontera. Se puede establecer el estilo del borde, el color, hacerlo, etcétera. Pondré el estilo de borde a una línea sólida y estaba en el color a azul. En consecuencia, vemos que el borde y el color del campo han cambiado. Vemos que el ancho del elemento ocupa toda la página y la altura del elemento es básicamente tan alta como su contenido. El esquemático aquí arriba da una visión rápida de los márgenes y el relleno actuales. Actualmente el ancho está establecido en el mismo ancho que una página. El valor por defecto de la altura depende del tamaño de fuente y cuántas líneas de textos o R. Y aquí abajo tenemos margen y relleno. Entonces, ¿cuál es la diferencia entre margen y relleno? Margen especifica la distancia exterior. En otras palabras, hasta qué punto se aleja el elemento de otros elementos. Vemos que el párrafo se empuja hacia adentro y hacia abajo por 10 píxeles, el tamaño del elemento necesita disminuir para proporcionar más espacio para los márgenes. Acolchado, por otro lado, es la distancia interior. Especifica la distancia entre el borde y el contenido. Como se puede ver, el texto se empuja hacia la derecha y la altura del elemento aumenta para proporcionar suficiente espacio para el relleno. Si desea establecer márgenes y relleno específicos para los bordes superior, inferior, izquierdo y derecho. Puede hacer clic en la flecha de aquí y establecer los valores por aquí. Por cierto, si estás interesado en establecer el ancho y alto máximo o mínimo, puedes hacer click en las flechas aquí. Por cierto, una cosa útil en CSS es que puedes establecer el margen a auto. Los márgenes izquierdo y derecho se establecerán automáticamente para centrar igual el elemento en el centro de la página. En este ejemplo, establecí el margen en 10 píxeles barra espaciadora auto. Eso significa que los márgenes verticales en los márgenes superior e inferior, decir, se establecen en 10 píxeles. Por qué se establecen automáticamente los márgenes izquierdo y derecho para asegurarse de que el elemento esté centrado en el centro de la página. Entonces eso es todo por ahora. Gracias por ver. En el siguiente video, vamos a explorar cómo agregar componente más complejo, la barra de nav. Nos vemos ahí. Adiós. 9. Hora 3: añadir la Navbar: Hasta el momento hemos estado trabajando con elementos muy sencillos. A continuación se encuentra un elemento más complejo, la barra de navegación. Estaremos agregando una barra de navegación básica. Estaremos agregando una lista desplegable a la barra de navegación, y estaremos explorando las opciones básicas de la barra de navegación. Entonces en el siguiente video, vamos a agregar múltiples páginas a un proyecto y enlazarlas en la barra de navegación. También vamos a copiar la barra de navegación a las otras páginas y vamos a probar la página usando la vista previa. Entonces empecemos a añadir la barra de navegación en el panel Componentes. Búsqueda de navbar. Haga clic y arrastre el componente a la parte superior del lienzo o al panel de vista general. El nav bar es significativamente más complejo de lo que hemos utilizado hasta ahora. mirar en el panel de visión general, vemos que la barra de navegación contiene la marca navbar. Voy a nombrar el mío. Pausa página. El toggle de la barra de navegación es para el icono de Menú. Cuando el ancho de la página es lo suficientemente pequeño, la barra de navegación mostrará el icono de menú en lugar de los elementos de navegación. El elemento navbar-colapso contiene un aire, que a su vez contiene los artículos de navegación. Cada elemento de navegación a su vez contiene un enlace. Podemos añadir fácilmente en más artículos de navegación duplicando y podemos eliminarlos fácilmente borrándolos. Verás en la barra de formato que puedes establecer estos elementos estrechos en activos o inactivos. Por ahora para evitar confusiones, que desactiven todos ellos. En mi caso, voy a añadir elementos de navegación gratis y los voy a poner a home gallery y sobre mí. A veces es útil agregar lista desplegable a la barra de navegación. Hay algunas maneras de hacer esto. Una forma es agregarlo desde la columna del componente. Vaya al panel Componentes y busque el menú desplegable. Haga clic y arrastre el componente al panel de visión general, asegurándose de que esté colocado entre los dos elementos de navegación. El componente desplegable contiene un enlace y un menú. Y el menú contiene tres elementos de menú. Vamos a editar el texto para el menú desplegable y los elementos del menú. A modo de ejemplo, añadiré las descargas de texto, software y recursos. Y yo borraría el tercer elemento del menú. El navbar viene con algunas opciones específicas. Echemos un vistazo. El top del panel. Contamos con las opciones específicas de la barra de navegación. Podemos establecer el fondo y el color del texto. Podemos mantenerlo por defecto, o tenemos una opción de muchos colores de tema diferentes. También podemos establecer la posición incluyendo el valor predeterminado, fijo a la parte superior, fijar la parte inferior y la parte superior pegajosa. Tengo ganas de vender el mío demasiado pegajoso top. Fluido significa que el ancho del contenido de la barra de navegación cambiará gradualmente a medida que cambie el ancho de la ventana. Si se desactiva el líquido, el ancho del contenido también cambiará dependiendo del ancho de la ventana. Pero en pasos discretos. Con expandido, podemos establecer cuándo preferiríamos ver el icono del menú o los elementos del nav. En este caso, se mostrarán los artículos de navegación para ventanas de tamaño mediano y superior. Y mostraremos el icono del menú para tamaños de pantalla que son más pequeños que medianos. Por último, el estado activo inteligente determina si la barra de navegación muestra qué página está activa actualmente. Es decir, el enlace del elemento de barra de navegación a la página actual se establecerá como activo. Con los setters restantes inactivos. Voy a poner mi brazo de esta manera. El usuario podrá ver de un vistazo qué página utiliza actualmente viendo. Entonces eso fue un resumen rápido de ellos nav bar. En el siguiente video, vamos a agregar algunas páginas más y vamos a vincularlas. También vamos a copiar este componente de barra de navegación a las otras páginas de una manera que cuando cambiemos uno de ellos o los elementos de la barra de navegación cambiarán. Entonces nos vemos en el siguiente video. Adiós por ahora. 10. Hora 3: vincular otras páginas y pruebas: En este video, vamos a tomar los ítems de enlace de barra de navegación que hemos creado en el video anterior. Y en realidad los vamos a vincular. Pero antes de que hagamos eso, primero hagamos las nuevas páginas. Verás en la esquina superior derecha que actualmente estamos trabajando en una página llamada index.html. Index.html es lo que llamamos la página de inicio. Haga clic en la flecha junto a index.html y haga clic en nueva página, aparece una nueva página con el nombre de punto sin título HTML. Acude al panel de diseño en la columna inferior derecha, y encuentra la página web debajo del encabezado de la página. Haga clic con el botón derecho o presione F2 para cambiar el nombre del archivo. Voy a renombrar el mío a sobre mí, ese HTML. Voy a repetir el proceso para crear una serie de páginas web nuevas. Uno por cada artículo de barra de navegación. Voy a crear galería ese HTML. Descarga software que HTML, y descarga recursos que HTML. A continuación, volvamos a index.html. Selecciona el enlace en uno de los elementos de la barra de navegación y ve a la pestaña Opciones de la columna del lado derecho. Debajo de las opciones de enlace de encabezado, podemos establecer la URL. Url es otro término para enlace. Específicamente, es la abreviatura de enlace universal de recursos. Aquí puedes agregar cualquier dirección web, incluyendo sitios externos como tu sitio web de hermanos o hermanas o tu sitio web de socios comerciales o lo que sea. En este caso, queremos aprovechar de las páginas web internas. Los escogemos haciendo clic en nuestro triángulo aquí, y luego podemos elegirlos de esta lista desplegable. Añadamos un enlace para cada uno de los elementos de la barra de navegación. A continuación, vamos a copiar esta barra de navegación en la parte superior de cada página de nuestro sitio web. Para ello, vaya al panel de vista general y seleccione un componente Navbar, luego haga clic con el botón derecho y elija Copiar y pegar. Copia. A continuación, vaya a cada página una por una, y haga clic con el botón derecho en un lienzo y elija Copiar y Pegar, Pegar vinculado. De esta forma, si después queremos hacer un cambio a la barra de navegación, podemos hacer el cambio a solo una de las copias y se actualizará en todas ellas. Por último, nos gustaría probar para asegurarnos de que no hemos cometido ningún error. O agregando los enlaces. Todos cometen errores después de todo. Entonces, por eso las pruebas son una parte muy importante de un desarrollo web. La forma más directa de probar estos enlaces en este momento es crear una vista previa. En la parte superior derecha haga clic en el botón de vista previa, aparece una ventana, haga clic en Toggle para habilitar la vista previa. Haga clic en abrir en el navegador para visualizarlo. Y eso es todo por ahora. Gracias por ver. En el siguiente video, vamos a aprender a personalizar el formato de la barra de navegación. 11. Hora 4 - carrusel: Hola a todos y bienvenidos al siguiente capítulo. En este capítulo, vamos a sumar cuatro componentes avanzados a nuestra página web. Estos componentes son carrusel, galería, Google Map, y lista de artículos. Entonces en este video, Empecemos con el carrusel. carrusel es esencialmente una carrusel que se puede utilizar para recorrer en bicicleta una serie de fotos, diapositivas o infografías. Agregar un carrusel en Bootstrap Studio es un asunto sencillo. Por último, carrusel entre los componentes y arrástrelo al panel de vista general. El carrusel consta de toboganes y controles. Como de costumbre, puede agregar y eliminar fácilmente estos elementos duplicando o eliminando. Los controles incluyen los botones siguiente y anterior, así como el indicador para ilustrar qué imagen se está mostrando actualmente. Nos gustaría agregar imágenes a este carrusel, pero primero necesitamos importarlas. Para demostrar voy a escoger algunas fotos de Paxos y voy a importarlas al estudio Bootstrap haciendo clic y arrastrando los archivos al panel de diseño. Aparecen bajo el epígrafe imágenes. A continuación, seleccione la imagen en una de las diapositivas y haga doble clic. Es más fácil usar el panel de visión general para esto. Aparece una ventana con una lista de imágenes importadas. Selecciona la imagen que quieras y pulsa, Ok, repite los pasos anteriores para agregar las otras imágenes al carrusel automáticamente expandirlas para ocupar todo el ancho de la página. Para cambiar esto, en el panel de apariencia, establezca los márgenes izquierdo y derecho en 50 píxeles. El cursor viene con algunas opciones. Podemos modificar estas opciones utilizando el panel de opciones. Aquí podemos establecer todo tipo de opciones como el intervalo, pausa al hover, tipo de transición, etcétera. Y eso es realmente todo lo que hay a ello. A continuación, aprendamos sobre galería. 12. Hora 4: galería: Una galería es una manera útil de presumir tu cartera. Consiste en una cuadrícula de imágenes en la que el usuario puede hacer clic para verla en una vista más grande. Sigue estos sencillos pasos para añadir una galería a tu página web. Añadamos un componente de galería de faro a la página. Podemos editar todo el texto de la manera habitual. Al mirar el panel de visión general, vemos que la galería es bloque, cual contiene un contenedor. El contenedor contiene un div y una fila. Un div es la abreviatura de división, y se puede usar para agrupar diferentes elementos juntos. Un contenedor es simplemente un div con el atributo de clase contenedor. Aprenderemos más sobre clase de contenedor en el futuro. También tenemos una fila la cual contiene una serie de columnas. Filas y columnas son bastante útiles para crear cuadrículas responsivas como esta, aprenderemos cómo funcionan las filas y columnas en un capítulo futuro. Para cambiar una de las imágenes, basta con hacer doble clic sobre ella y seleccionar la imagen. Asegúrate de haber importado la imagen que quieres importar primero, solo tienes que hacer clic y arrastrar la imagen desde tu gestor de archivos hasta el panel de diseño en el estudio bootstrap. Añadamos una descripción de herramientas para cada imagen. Seleccione una imagen, vaya al panel Opciones y vaya a la información de herramientas. Habilitar la información de herramientas. Por último, agreguemos una animación. Vaya al panel Animación en la columna superior derecha. Bajo disparadores seleccione el cursor. De esta forma, la animación se activará cada vez que el usuario pase por encima de ella con un mouse, puede seleccionar el tipo de animación a. Por ejemplo, vamos a seleccionar swing. Esa es una bastante divertida. Puedes obtener una vista previa de la animación usando el botón Reproducir y puedes probarla en la vista previa. Por lo que como puedes ver, agregar una galería en el estudio Bootstrap es súper fácil. A continuación, agreguemos una lista de artículos. 13. Hora 4: mapas: Así que bienvenido de nuevo. En este video, vamos a explorar un componente más avanzado que podemos arrastrar y soltar en nuestro sitio web usando Bootstrap studio. Vamos a explorar Google Maps. Esto es súper útil cuando estamos tratando de ayudar a los clientes a encontrarnos. Empecemos simplemente arrastrando y soltando el componente Mapa sobre nuestro lienzo. Vemos que antes de poder activar este componente, necesitamos establecer la clave API. Una clave API es simplemente un número de identificación. Google Maps utiliza este número de identificación solo para rastrear la frecuencia con la que estás usando su servicio. Con una clave API gratuita, tu proyecto puede cargar 25 mil mapas por día. Si necesitas más que eso, entonces vas a tener que pagar. Pero para el 99 por ciento de la gente normal, eso es suficiente, ¿verdad? Crear una clave es bastante fácil. Simplemente asegúrate de tener el mapa seleccionado y luego cualquier panel de opciones, haz clic en Crear clave API. Estamos redirigidos a la plataforma Google Cloud. Necesitas iniciar sesión con tu cuenta de Google si aún no estás conectado como ion, necesitamos crear o seleccionar un proyecto primero. Esto es simplemente para que Google sepa qué proyecto está tratando de acceder a Google Maps. Ya que solo tengo una clave, es tipo de irrelevante en qué producto lo voy a almacenar. Y de hecho, no tengo proyectos serios ejecutándose en Google Cloud Platform, así que solo voy a escoger uno al azar. Podemos establecer el nombre de la clave aquí y podemos agregar alguna restricción. Siempre hay un ligero riesgo de que alguien consiga el código de serie a tu llave y luego use todas tus cargas de mapa. Por lo que lo mejor es restringirlo a tu página web. Simplemente voy a usar esta clave para demostrar Google Maps, pero después de eso, la voy a eliminar de inmediato. Entonces para mí sólo puedo mantener la llave como irrestricta. Sólo hazme un favor y recuérdame que lo elimine más tarde. Gracias. Está bien, adelante. Demos click en Crear. Y una vez que lo hacemos, genera los detalles de nuestra clave. Haga clic en copiar aquí para copiar el número de serie de una clave y pegarlo en este campo. Y como puedes ver, automáticamente obtenemos una actualización en vivo en nuestro Canvas. Actualmente está fijado a las marcas de París, pero lo voy a vender a mi ubicación real, que es Tombuctú, Mali. Podemos cambiar el tipo de mapa aquí, por ejemplo, hoja de ruta o satélite. Podemos establecer aquí el ancho y el término de altura. Podemos establecer aquí la palanca de zoom predeterminada. Ahora mismo no tengo una dirección exacta puesta en el mapa. En la mayoría de los lugares, google Maps soporta fácilmente la adición de direcciones exactas, pero en lugares como Tombuctú, no siempre funciona. O por ejemplo, si estás organizando un evento en medio de un campo, tampoco podrás poner en tu dirección exacta. Es mejor poner en coordenadas. Puedes buscar fácilmente las coordenadas en Google Maps y copiarlas pegarlas en bootstrap studio. Y ahora tenemos este pequeño marcador rojo con mi ubicación exacta. Bien entendido. Por cierto, no tengo ningún vivo en Tombuctú. De acuerdo, vamos a hacer un poco de orden. Se ve bastante bonito. Potencialmente puede parecer bastante profesional en tu página web. Pero en cuanto a mí, lo voy a quitar porque realmente no tengo clientes que necesiten encontrar mi dirección. Por lo que no debo olvidar eliminar mi clave API. Gracias por recordarme. Voy a volver a iniciar sesión en mi nube de consola. Y voy a dar click en este botón para eliminarlo. Entonces eso es todo de mi parte por ahora. Nos vemos en el siguiente video. 14. Hora 4: lista de artículos: Una lista de artículos es una gran manera de dirigir a los surfistas a contenidos más específicos de tu página web. Combina miniaturas, descripciones y enlaces en una cuadrícula receptiva. Como de costumbre, basta con encontrar la lista de artículos en el panel Componentes y arrástrala y suéltala en la página o en el panel de vista general. Al igual que con la galería, obtenemos un diseño flexible mediante el cual la cuadrícula de imágenes reorganiza dependiendo de cuán anchas sean las páginas. Pero en este caso, también tenemos una descripción y un enlace. Al mirar el panel de resumen, vemos que la lista de artículos consta de un div y una fila. El div contiene el encabezamiento y la introducción. La fila contiene columnas. Cada columna contiene un enlace con una imagen, un trazo de encabezado, párrafo, y un enlace con un icono. Para cambiar la imagen, simplemente haga doble clic en la imagen, seleccione la imagen que desee, pero asegúrese de que la imagen se haya importado primero a bootstrap Studio. Vamos a editar este texto. Y podemos establecer los enlaces URL seleccionando el enlace y yendo al panel Opciones. Por último, cambiemos estos iconos. Basta con hacer doble clic en el icono. Vemos que todo tipo de iconos están disponibles en diferentes categorías. Pondré los iconos pre buscando máscara, avión, y corazón. Entonces eso es todo para este capítulo. Espero que este capítulo les haya demostrado lo fácil que es agregar algunos componentes bastante avanzados a su sitio web. En el siguiente capítulo, vamos a aprender un poco más sobre cómo funcionan. A partir de filas y columnas explicadas. Si tienes una comprensión aproximada de cómo funcionan, fácilmente podrás personalizar estos componentes e incluso crear componentes propios. 15. Hora 5: filas y columnas: El modo estándar en Bootstrap de crear una cuadrícula responsive es usar filas y columnas. La cuadrícula está configurada para ser receptiva porque el diseño depende de qué tan amplia sea la pantalla antes de comenzar, una explicación líder sería bastante útil aquí. Los términos fila y columna son un poco engañosos en este caso porque sugeriría que el número de columnas en la cuadrícula es estático y las filas y columnas son iguales y equivalentes. En realidad este no es el caso. Y puede ser un plomo arriba, confuso para rosar las cosas en cuanto a filas y columna. De hecho, se puede pensar en una fila más como una caja. Y se puede pensar en una columna más como un artículo que está dispuesto dentro de esa caja. Entonces una fila es como una caja que contiene una serie de artículos. Cada elemento tiene un cierto ancho y prefiere estar dispuesto horizontalmente de izquierda a derecha. Siempre y cuando haya suficiente espacio, todos estos elementos estarán dispuestos en una sola línea. Si no hay suficiente espacio, los artículos posteriores serán arrojados hasta la siguiente línea. Entonces, por ejemplo, si tienes una caja que contenga un elemento que tiene un ancho del 25 por ciento de la página, cabría fácilmente. De hecho, podrías caber cuatro de esos artículos y todos estarían dispuestos en una sola línea. Pero si añadiéramos un quinto ítem, no habría suficiente espacio en la línea, por lo que ese ítem tendría que ser bombeado hasta la siguiente línea. En el marco de Bootstrap ese desarrollador puede elegir qué tan ancho es cada elemento dependiendo del ancho de la pantalla. Entonces, por ejemplo, el desarrollador podría establecer el ancho de cada columna al 100% para pantallas pequeñas, al 33 por ciento para pantallas medianas, y al 25 por ciento para gritos grandes y extra grandes. Eso significa que solo uno cabría prolina en pantallas pequeñas. Los artículos gratis cabían uno al lado del otro en greens de tamaño mediano. Y cuatro escupirían lado a lado en pantallas extra grandes. A continuación, vamos a crear un ejemplo sencillo para que la explicación sea un poco más intuitiva y un poco menos abstracta. En este ejemplo, usaremos filas y columnas para crear una cuadrícula responsiva simple en la página sobre mí. Primero, vayamos a la página y arrastremos una fila al lienzo. A continuación, agreguemos tres columnas a la regla. Podemos ver que las tres columnas están dispuestas una al lado de la otra. Cuando esperamos el HTML generado, vemos que las filas y columnas son divs simples, pero con la fila de atributos de clase y col agregada. Seleccione la primera columna en Opciones, puede establecer el ancho de la columna. Estableciendo el ancho en uno, establece el ancho en 1 12 del ancho disponible. Esto deja más espacio para las otras dos columnas. Y se expandirán. Estableciendo el ancho en 12, establece el ancho en 100% del disponible. Con. Esto empuja a las otras dos columnas hacia abajo. Al establecer el ancho en seis se establece el ancho disponible en 50 por ciento. Esto deja mucho menos para las otras dos columnas. Por cierto, es bastante interesante ver cómo el cambio del ancho de la columna afecta al código HTML. A continuación, vamos a establecer el ancho para diferentes tamaños de pantalla. En primer lugar, vuelva a establecer el ancho de columna en ninguno. Cuando ampliamos estas opciones, vemos que podemos establecer el ancho de columna para diferentes tamaños de pantalla. Para tamaños de pantalla pequeños, Vamos a establecer el ancho de cada columna en 12. Esto significa que cada columna ocupará el 100% del espacio disponible. Pantallas de tamaño mediano. Nos gustaría organizar las dos primeras columnas de lado a lado. Y nos gustaría empujar la tercera columna hacia abajo. Por lo tanto, vamos a establecer el ancho en 66 y 12 respectivamente. Y por último, para pantallas grandes y extra grandes, quisiéramos que las pre columnas dispuestas una al lado de la otra. Pero quisiéramos que el ancho de la tercera columna fuera más ancho que el ancho de las dos primeras. Entonces pongamos el ancho a Bree, Bree y seis respectivamente. Entonces ahora tenemos una cuadrícula de respuesta básica la cual tiene una capa diferente dependiendo del dispositivo en el que estés. A continuación, agreguemos un poco de contenido y estilo. Empecemos agregando un encabezamiento y un párrafo a cada columna. A continuación, agreguemos un borde a cada columna. Puede mantener pulsado el botón Control para seleccionar varios elementos al mismo tiempo. Como se puede ver, las columnas están tan juntas que están tocando. Podríamos agregar algo de espacio entre ellos al aumentar el margen, pero esto provoca un problema. El espacio extra ocupado por los márgenes empuja la segunda columna a la siguiente línea. Y esto ensucia la capa que pretendíamos. Una mejor solución sería agrupar el contenido de la columna en un div y agregar un borde al div en su lugar. De esta forma, podemos cambiar fácilmente el margen sin preocuparnos de estropear el diseño. También quisiéramos agregar algún espacio entre los bordes de la página y el contenido de las columnas. Una forma sencilla de lograr esto es mediante el uso de un contenedor. Un contenedor es un elemento muy útil. Se trata de un elemento div sencillo con propiedades especiales. El contenedor siempre está centrado en medio de la página. Arrastremos y soltemos un contenedor en el cuerpo. Y luego simplemente arrastra y suelta la fila en el contenedor. Por último, ajustemos cada columna para agregar los toques finales. En primer lugar, voy a agregar algo de relleno a cada div. Y nuestra configuró un radio fronterizo de 20 píxeles. Después de todo, creo que eliminaré el borde de estos divs y más bien cambiaré el color de fondo. En su lugar. Añadiré una foto de perfil a la primera columna en lugar del texto. Voy a editar el texto y las columnas. Puede presionar Mayús Intro para agregar una nueva línea dentro de un elemento de párrafo. Por último, estableceré manualmente la altura de cada div para asegurarme de que la altura se mantenga igual para cada columna. Y así es como hacer un responsive básico creado usando filas y columnas en Bootstrap. A continuación, haré otro ejemplo en el que creo un pie de página como este. 16. Hora 5: ejemplo de filas (cómo crear un pie): A modo de segundo ejemplo, usaremos filas y columnas para crear un pie de página simple. El pie de página contendrá dos columnas, las cuales siempre estarán dispuestas lado a lado. En la segunda columna se contendrá una cuadrícula responsiva propia. Se va a organizar verticalmente si el ancho de la página es lo suficientemente pequeño y los iconos estarán dispuestos de lado a lado si el ancho de la página es lo suficientemente ancho. En primer lugar se agregan los siguientes ítems. Agrega un pie de página. Agregue un contenedor dentro del pie de página, y una fila dentro del contenedor. Y agregar dos columnas dentro de una fila de elemento pie de página es sólo una etiqueta. Podríamos dejarlo fuera y usar un div en su lugar, pero mantenerlo simplemente facilita la lectura del código HTML. Ya hemos visto el contenedor antes. Agrega automáticamente márgenes apropiados al aleteo. Al lado de la primera columna, vamos a añadir dos iconos y dos párrafos. Nabr haga clic en el primer icono y cámbialo a mapa, el cual podemos encontrar en Font Awesome Five. Haga doble clic en el segundo ícono y cámbialo por masculino, cual podemos encontrarlos ítems CSS. Modificar el texto de los párrafos. Por cierto, puedes pulsar Mayús Intro para ir a una nueva línea dentro del mismo párrafo. Ahora agreguemos algo de contenido a la segunda columna. Agrega una fila y una columna. Agrega un enlace a la columna. Coloque un icono en, elimine el texto en el enlace. Duplicar la columna dos veces. Podemos cambiar el icono por algunos iconos de redes sociales como Twitter, Snapchat, o lo que quieras. Yo cambiaría la mía a YouTube, Facebook, y LinkedIn. Puede establecer la URL de cada enlace en el panel Opciones. Estos iconos están un poco en el lado pequeño. Podemos ampliarlos aumentando el tamaño de la fuente. A continuación, vamos a establecer el ancho de las columnas. Yo quiero empujar un poco a la derecha los iconos de las redes sociales. Por lo que estableceré el ancho de la primera columna 29 para asegurarme de que los iconos de las redes sociales permanezcan en el lado derecho de la página y nunca lleguen a la siguiente línea. Yo establecería el ancho de la segunda columna 2. Queremos apilar los iconos de las redes sociales verticalmente para pantallas pequeñas. Y queremos organizarlos de lado a lado para pantallas medianas y grandes. Por lo que para las tres columnas, establece la d parte con 212. A continuación, establezca el ancho MD 24. Por último, notamos que los iconos del lado derecho y arriba un poco más bajos que el texto del lado izquierdo. Podemos arreglar esto seleccionando la primera fila y configurando la alineación y para centrar en el panel Opciones. Y así hemos hecho una bonita cuadrícula responsiva para usar como pie de página. Es un asunto sencillo copiarlo a las otras páginas. Recuerda usar pegar vinculado para que cualquier cambio en cualquiera de las copias se aplique automáticamente a las demás. Y eso es todo para este capítulo. En el siguiente capítulo, vamos a crear algún estilo personalizado para dar formato a este pie de página así como a otros elementos de la página. Nos vemos en el siguiente capítulo. Adiós. 17. Hora 6: importar temas: Hasta el momento hemos estado usando los colores predeterminados de Bootstrap, fuentes, etcétera. Y hemos estado cambiando manualmente el formato de los elementos individuales. Es posible, sin embargo, cambiar el aspecto general y el estilo del sitio web en su conjunto sin necesidad de cambiar manualmente cada elemento. Podemos lograr esto cambiando el tema o podemos modificar el estilo usando CSS. Los temas son los estilos, diseños y formatos predefinidos de una página. uso de temas preexistentes puede ser una forma rápida de cambiar el aspecto general y la sensación del sitio web. Para demostrar, primero nuestra barra de navegación seleccionada. En el panel de opciones, vemos que tenemos una serie de opciones diferentes para el color de fondo. Voy a ponerlo a primaria. A continuación, voy a seleccionar el párrafo e ir al fondo de apariencia. Actualmente tengo un green no estándar seleccionado. Haga clic en el cuadrado coloreado junto al cuadro de entrada y elija el diseño de tabulación. el ratón sobre estos colores se le da el nombre de la variable. Escogeré el verde con el nombre variable éxito. Ahora que hemos vinculado el color de la barra de navegación y el color del párrafo al tema que cambia el tema. Haga clic en la configuración. Y bajo temas Bootstrap, puedes elegir cualquier número de vigas de la lista. Voy a recoger a oscuras y Guardar. Como puedes ver, la barra de navegación y un párrafo, así como el color del texto han cambiado de acuerdo al nuevo tema. Tenga en cuenta que el color del fondo de la página se estableció manualmente y no está vinculado a un color de tema. A menos que restablezcamos el color del fondo, no cambiará pase lo que pase. Tú eliges. 18. Hora 6: estilos personalizados: Como hemos visto, es un asunto sencillo establecer los colores de fuente, márgenes, etc, de cada elemento utilizando el panel de apariencia. Pero esto significa que si queremos cambiar el aspecto y el estilo en general, tendríamos que volver atrás y decir el formato para todos y cada uno de los elementos. Esto obviamente puede ser muy fortuito y llevar mucho tiempo. Una mejor manera sería crear un estilo CSS y vincular el estilo a los elementos relevantes utilizando atributos de clase. En lo siguiente, crearemos un blog de estilo CSS que establece el color de fondo a parche. Entonces aplicaremos ese estilo a todos los elementos relevantes. Vaya a index.html, seleccione el cuerpo y tire hacia arriba del inspector de código. En el panel CSS USE una serie de bloques CSS. El primer bloque es un estilo de punto de elemento. Este espectáculo al formato directo lo hemos hecho usando el panel de apariencia. Algunos de los bloques tienen un candado que muestra que no se pueden editar. En el panel HTML. Tire hacia arriba la pestaña de atributos, agregue una nueva clase llamada Elemento de fondo. En esta clase vamos a identificar todos los elementos donde queremos establecer el color de fondo. Abramos el archivo styles.css. Vaya al panel de diseño, haga doble clic en styles.css para abrir el archivo, aparece una pestaña llamada styles.css en el panel Estilos. Haga clic en Crear, aparece un nuevo bloque CSS. Añadiré el mismo color de fondo aquí. Por lo que ahora el marcado directo que aplicamos usando el panel de apariencia se ha vuelto irrelevante. Este es el código podemos ver un elemento que estilo. Podemos quitarlo haciendo clic en los tres puntos en la esquina superior derecha del bloque y seleccionar Borrar. A continuación, vaya a la página sobre mí ese HTML. Seleccione el cuerpo y agregue el elemento de fondo de texto a los nombres de clase. Como puede ver, el color de fondo se aplica a esta página 2. Añadamos el mismo nombre de clase a los cuerpos de todas las demás páginas. Cuando lo agregamos a la página, descargamos recursos dot HTML, vemos un pequeño problema. Vemos que una gran parte de la página permanece blanca. Esto se debe a que la lista de artículos tiene un fondo blanco por defecto. Podemos resolver esto seleccionando el bloque y luego agregando el elemento de fondo de clase a este animal también. Como se puede ver en este caso, el bloque tiene más de una clase. Entonces, en resumen, en este caso, simplemente he creado un bloque CSS llamado Elemento de fondo, que simplemente establece el color de fondo o los animales que contienen este atributo de elemento de fondo. Contamos con el conjunto de colores de fondo. Si alguna vez quiero cambiar el color del fondo, todo lo que necesito hacer es cambiar el color por aquí y se modificará para todos los elementos relevantes. Como multa de pagar. Simplemente quisiera mencionar que a pesar de que escribía todo el código CSS en este ejemplo, no necesitamos escribir, pero también podemos usar el panel de apariencia. Para hacer eso. En primer lugar, asegúrese de haber seleccionado un elemento que contenga este atributo. Y luego puedes seleccionarlo de esta lista desplegable en la parte superior del panel de apariencia. A partir de ahí podemos modificar el bloque CSS de cualquier manera que veamos conveniente. Entonces eso es todo por ahora. Gracias por ver. En el siguiente video, vamos a hablar de estilo responsive. Es decir, vamos a crear diferentes estilos para diferentes dispositivos. En otras palabras. 19. Hora 6: estilos responsivos: También podemos agregar estilo, que depende del tamaño de la pantalla. Por ejemplo, podemos aplicar pequeños márgenes si el sitio web está siendo visto en un teléfono, y grandes márgenes si el sitio web está siendo visto en una computadora de escritorio. Esto lo logramos usando una consulta de medios. Empecemos agregando el estilo predeterminado. Agrega un atributo de clase llamado pie de página a la primera fila dentro de la foto. asegura de que el archivo styles.css esté abierto. Crea un nuevo bloque haciendo clic en Crear y renombrarlo a pie de página de punto. Aquí vamos a añadir el estilo por defecto. Démosle una frontera sólida. Radio de 10 píxeles, un relleno de 20 píxeles, y un margen de cinco píxeles. Usando este valor predeterminado, el estilo se ve bien para pantallas medianas y grandes, pero en pantallas más pequeñas se ve un poco aplastado. Y nuestras pantallas más grandes, está un poco demasiado espaciada. Entonces aumentemos el relleno para las criptas más grandes. En primer lugar, duplique el bloque de estilo de pie de página de punto haciendo clic en los puntos rojos y seleccionando Duplicar. A continuación, en un bloque inicial duplicado, agregue una consulta de medios haciendo clic en los tres puntos y elija agregar una consulta de medios. el texto agregar medios, Apareceel texto agregar medios, min-width, cien, doscientos píxeles. Esto significa aplicar el estilo solo cuando el ancho de la ventana sea de al menos ciento doscientos píxeles de ancho. El estudio Bootstrap ha recogido a una persona, 200 píxeles, porque actualmente estamos viendo la pantalla a una persona a 100 pixels. Cambiemos el bloque de estilo para cambiar el relleno, izquierdo, relleno, parte superior derecha y relleno inferior. Recuerda, también puedes hacerlo usando el panel de apariencia si lo prefieres. A continuación, eliminemos el borde y disminuyamos el margen y el relleno para pantallas más pequeñas. Duplicar el bloque CSS una vez más y modificar la consulta para leer. Agregar media max-width 768. Modificar el estilo duplicado para establecer el margen y relleno en 0 y eliminar el borde. Y ahí lo tenemos. Ahora tenemos un pie de página el cual no tiene borde y muy poco relleno cuando se ve en pantallas pequeñas. Y que tiene mucho relleno cuando se ve en pantallas grandes. En nuestro próximo video, vamos a utilizar variables para definir y aplicar una nueva paleta de colores para nuestro sitio web. Nos vemos pronto. Adiós. 20. Hora 6: definir los estilos: Cuando configuramos el color de fondo, lo elegimos directamente. Si queremos usar este color con más frecuencia, es una buena idea darle el color y nombre fácil de recordar. En este video, definiremos una serie de colores que usaremos en nuestra página web. Y los vincularemos con los diversos elementos. Tener los colores principales de nuestra página web en un solo lugar hace que sea más fácil escoger colores rosados y modificar posteriormente el diseño general del sitio web. En primer lugar, asegúrese de que el archivo styles.css esté abierto. Crea un nuevo bloque haciendo clic en Crear y renombrarlo a raíz de dos puntos. Y este bloque raíz, definimos un nuevo color llamado color de fondo. Ahora que hemos definido el color, vamos a usarlo en el bloque CSS llamado elementos de fondo de punto. Modificar el código para incluir una var, corchetes abiertos, color de fondo, corchetes de cierre. De esta forma, aplicamos el color que definimos en ruta a todos los elementos que contienen el elemento de fondo de clase, podemos definir cualquier número de colores de esta manera. Entonces, por ejemplo, vamos a establecer algunos de los colores que usaremos en capítulos posteriores. Ahora, agreguemos los siguientes colores. Tenía color de pie, el color de fondo de la cabecera, y el pie de página, cabeza pie de pie de página color hover. Este va a ser el color de los elementos de encabezado y pie de página. Cuando el ratón se cierne sobre él. Había puesto color de texto. El color del texto del encabezado y pie de página tenía texto de pie color de desplazamiento, el color del texto del encabezado. Cuando pasemos por encima de él, había puesto sombra, este será el color del efecto de sombra que usaremos. Podemos establecer estos valores de color aquí manualmente, o podemos hacer clic en este cuadrado de color para escoger el color. Ahora que hemos definido nuestra paleta de colores, Vamos a aplicar los nuevos colores a la barra de navegación y al pie de página. Crea un nuevo bloque de estilo llamado punto cabeza pie. Este bloque contendrá nuestro estilo personalizado para la barra de navegación y la foto. Establezca el color de fondo en el color del pie de la cabeza, establezca el color del texto en el color del texto del pie de la cabeza y establezca el refugio fiscal para que lea p x dx, sombra del pie de la cabeza. Nuevamente, podemos teclearlo manualmente o podemos usar el panel de apariencia para agregar el estilo. Ahora que hemos creado este bloque CSS, podemos vincularlo a la barra de navegación y al pie de página agregando el CSS BlockName en el panel de atributos. Probablemente hayas notado que el color del texto en la barra de navegación y los iconos y el pie de página todavía tienen su color predeterminado. Esto se debe a que estos colores ya se han definido en otro bloque CSS. Podemos resolver esto anulando esos bloques CSS. Pero ese es un tema para el próximo capítulo. Por ahora, terminemos este capítulo haciendo un poco de limpieza rápida en el pie de página. En realidad no me gusta mucho el aspecto de esta frontera cuando está en amarillo. Entonces vamos a quitarlo por completo y vamos a reemplazarlo por una sombra de gota. Seleccionemos el atributo de pie de página en el panel de apariencia y luego usemos el panel de apariencia para realizar los cambios necesarios. Podemos ver los cambios a medida que suceden de una manera seria aquí abajo. También necesitamos crear un poco más de espacio en el pie de página. Entonces vamos a seleccionar el pie de página y aumentar el relleno inferior, así como el relleno superior. Entonces eso es todo para este capítulo. Ojalá te divirtieras y te veo en el próximo capítulo. Adiós. 21. Hora 7: estilos de ejercicio: Hola a todos, ¿Cómo va? En este video, vamos a hablar de anular. Sin duda habrás notado que muchos de los bloques de estilo están bloqueados. En teoría es posible editar estos, pero esa no es una buena idea. Eso se debe a que cuando se actualice el marco Bootstrap, perderías todos los cambios que realizaste en estos archivos Bootstrap. Mejor sería anularlos. Para anular aquí dice plug, primero necesitamos determinar qué bloque CSS anular. Entonces, empecemos por anular la marca navbar, que determina el formato de este elemento. Seleccionado. Y tire hacia arriba del inspector HTML y tire hacia arriba de la pestaña de atributos. Vemos que la marca navbar tiene un atributo de clase llamado marca navbar. pasar por esta pestaña de diodos, obtenemos una visión general de todos los bloques CSS que afectan a la marca navbar. Estamos buscando el que establezca el color de la fuente. Al desplazarse por ahí, vemos que es éste. No podemos editar este bloque, por lo que necesitamos anularlo en su lugar. Haga clic en los tres puntos de la esquina superior derecha y seleccione Copiar a styles.css. Aparece un duplicado en el archivo styles.css. Vamos a editar el duplicado. Repitamos esto con los elementos restantes. El enlace activo tiene un ClassName, enlace nav activo. Nuevamente, estamos buscando el bloque CSS que defina un color. Éste es el que quisiéramos anular. Impacto para el enlace activo, No solo cambiemos el color de la fuente, sino que también cambiemos el color de fondo. También quisiéramos anular los enlaces de navegación. También quisiéramos anular el elemento desplegable. Y nos gustaría cambiar el color de fondo del menú desplegable. Podría estar preguntándose por qué hay tantos atributos en estos bloques CSS. Esto se debe a que no sólo son los atributos aquí mencionados, sino también los atributos de los padres y de los abuelos, etcétera. Por lo que podría ser tentado a modificar esta línea para que sea un poco más simple. Pero hay una posibilidad muy grande de que, eso estropeará el estilo que aplicaste. Esto se debe a lo que se llama especificidad. Está un poco más allá del alcance de este curso para enseñarte sobre especificidad. Pero si te interesa, puedes echar un vistazo a alguna lectura extra en este sitio web. Si te interesa. Si no, sólo sigue siguiéndome junto a mí. A continuación, vemos que todavía tenemos que anular este color azul en los iconos y pie de página. medida que nos desplazamos por los estilos asociados a este elemento, vemos que el color está establecido por un bloque CSS llamado a. en CSS, este es en realidad el estilo que se aplica a todos los enlaces. Y el icono hereda este atributo porque el padre del icono es un enlace. Si anular este bloque css, cambiaría el formato de todos los enlaces de la página. Obviamente eso no es lo que queremos. Entonces en este caso, es una mejor idea agregar un atributo de clase más llamado icono de cabeza pie y establecer el color de la fuente ahí dentro. Y agreguemos este atributo a cada uno de los iconos. Entonces en esta lección, aprendimos a anular los elementos CSS bloqueados que vienen con el marco Bootstrap. En el siguiente video, vamos a establecer el estilo estos elementos para cuando pasemos el cursor sobre ellos con un ratón. Y también vamos a cambiar el estilo de este ícono del menú, que parece ser muy terco y necesita una atención especial. 22. Hora 7: pasar a la persona: De acuerdo, a continuación queremos establecer nuestro estilo hover. Este estilo se aplicará siempre que el ratón pase sobre el elemento en cuestión. Establecer un estilo de Harvard es exactamente lo mismo que establecer un estilo normal. El único es que necesitamos agregar un cursor de dos puntos al final del nombre del atributo. Entonces por ejemplo, en el video anterior, hemos creado algún estilo para estos iconos y el pie de página. Vamos a copiar este bloque de marcado. Y al final del nombre del atributo, agrega doble punto hover. Y para el hover, estableceremos el color del icono en blanco. Cuando miramos los otros elementos, como la marca navbar, vemos que ya se ha establecido el estilo hover. Por lo que para actualizar estos basculantes, necesitamos anular estos cuadro CSS, como sabemos por el video anterior. Para ello, todo lo que necesitamos hacer es copiarlos al bloque styles.css y actualizarlos con el formato que necesitamos. Por último, vemos que este elemento del menú aún no es el color que queremos. Para resolver esto, eliminemos la imagen y la reemplacemos por un icono. Cuando miramos el CSS, vemos que la URL de la imagen de fondo SVG, anula este bloque copiándolo a styles.css y reemplaza URL SVG por ninguno para eliminar la imagen. A continuación agregamos un icono en su lugar. Arrastre y suelte un icono en el lapso. Haga doble clic en el icono y encuentre la que se llama barras en Font Awesome 4. Encontremos el bloque correcto para anular y cambiar el color de la fuente a amarillo. Y por último, aumentemos el tamaño del icono aumentando el tamaño de la fuente. Entonces eso es todo para estilizar y formatear. Espero que te haya sido interesante y espero que te hayas divertido aprendiendo sobre ello. En el siguiente capítulo, vamos a seguir adelante con algo completamente diferente. Vamos a hablar de Flexbox. Entonces los veré en el próximo capítulo. Adiós por ahora. Adiós adiós. 23. Hora 8: Flexbox: Hola a todos y bienvenidos al siguiente capítulo de Bootstrap Studio. En este capítulo, vamos a aprender todo sobre Flexbox. Flexbox es una forma fácil de especificar el espaciado entre diferentes elementos en una rejilla. En este primer video, vamos a tener una explicación rápida. Y luego en el siguiente video vamos a poner a buen uso ese conocimiento elaborando un ejemplo en el que distribuimos iconos gratuitos a través de una columna. En el tercer video, usaremos flexbox para asegurarnos de que empujamos el pie de página hasta la parte inferior de la página. Entonces, empecemos. En primer lugar, vamos a armar las cosas. Empecemos agregando un div simple a la página. Y dentro de ese div, Vamos a agregar tres párrafos. Y vamos a editar el texto para nombrarlos párrafo 1, 2, y 3. Para ayudar a visualizar las cosas, agreguemos un pequeño margen al div. Aumenta la altura del div, y agrega un borde. Y además, pongamos el fondo de los párrafos en rojo, verde y azul. Ir a Opciones. Aquí vemos ese título, Flexbox. Y vemos una serie de listas desplegables. Podemos utilizar estas listas desplegables para establecer cualquiera de las propiedades del cuadro, que es en este caso el div. O podemos establecer propiedades de los elementos dentro de la caja, que es, en este caso los tres párrafos. Echemos un vistazo a algunas de las propiedades de la caja que podemos establecer. Entonces, antes que nada, asegúrate de que el div esté seleccionado. Y encuentra el flexbox de encabezamiento en el panel Opciones. Empecemos configurando el contenedor flex en flex. A continuación, pongamos la dirección a remar. Como se puede ver, los párrafos ahora están dispuestos lado a lado en lugar de verticalmente. También podemos establecer la dirección para remar reversa. Por lo que toda la columna revertir para cambiar el orden de los párrafos. Utilizando la lista desplegable justificar contenidos, podemos cambiar la disposición de estos párrafos dentro de su contenedor. Podemos usar inicio y sin centrar para poner los párrafos al inicio, al final, y al centro de la fila. Podemos usar entre, que pone el primer párrafo en el inicio mismo y el último párrafo en el mismo final. Y entre párrafos igualmente espaciados entre ellos. Y podemos usar alrededor con espacios o elementos por igual. Tenga en cuenta que justifique también funciona cuando establecemos la dirección a la columna. Pero en este caso, la justificación funciona verticalmente más que horizontalmente. Puede ser divertido jugar con estos solo para tener una sensación de ello. También podemos establecer la alineación. El alineamiento funciona igual que justificar, pero funciona en la dirección perpendicular a la dirección que hemos establecido aquí. Por ejemplo, si lo ponemos en centro, los párrafos se envían a la mitad del div. Algunas de estas listas desplegables no se aplican al contenedor, sino que se aplican a los elementos dentro del contenedor, los párrafos en este caso, por ejemplo, podemos establecer si el elemento debe crecer o no para llenar el espacio disponible. Esa es una visión general rápida de la configuración de flexbox. Todavía queda más por aprender sobre Flexbox. Pero por el bien de este curso, creo que lo vamos a dejar así por ahora. Si estás interesado en aprender más, te recomiendo el siguiente sitio. Pero para mí por ahora, voy a despedirme. En el siguiente video, vamos a aplicar lo que hemos aprendido a este sencillo ejemplo en el que utilizamos flexbox para aplicar un espaciado consistente entre estos pre iconos en cada columna. Entonces nos vemos en el siguiente video. Adiós por ahora. 24. Hora 8: ejemplo de Flexbox - Arreglar íconos: Hola, todo el mundo tiene un ir. Espero que estés teniendo un gran día y bienvenidos al siguiente video. En este video, vamos a aplicar lo que hemos aprendido sobre flexbox en el video anterior para asegurar un espaciado igual entre estos tres iconos en cada una de estas columnas. Entonces empecemos. Ir a la página, descargar software que HTML, arrastrar y soltar el artículo es a la página entre el encabezado y el pie de página. Suprímate la introducción y suprimir dos de los artículos. Arrastre y suelte y div en el artículo restante justo después del párrafo. Elimina el enlace que contiene el icono. Arrastre y suelte un nuevo enlace en el div. Edita el texto, arrastra y suelta un nuevo icono en el enlace. Establezcamos el tamaño de fuente del enlace en 32 píxeles. Y duplicemos el enlace dos veces. Nuestro conjunto mis iconos al pingüino de Linux, el logotipo de Windows. Y a codificar. Por último, vamos a configurar el flexbox div seleccionado e ir al panel Opciones. Establecer contenedor flex a flex, establecer, justificar contenido a alrededor. Ahora tenemos una plantilla para nuestro artículo. Podemos duplicar fácilmente esto para llenar la lista de artículos. Y a continuación podemos editar los pormenores de cada entrada. Entonces en este ejemplo, usamos flexbox para mostrar cómo podemos agregar fácilmente un espaciado sensible entre estos tres iconos para que los iconos se distribuyan uniformemente independientemente del tamaño de pantalla que estemos utilizando. En el siguiente ejemplo, vamos a utilizar flexbox para empujar este pie de página hasta la parte inferior de la página, nuevo, independientemente del tamaño de ventana. Entonces nos vemos en el siguiente video. Adiós por ahora. 25. Hora 8: ejemplo de Flexbox: Hola a todos y bienvenidos al siguiente video. Es posible que hayas notado que el pie de página no siempre llega al borde inferior de la página. Una forma fácil de resolver esto es mediante el uso de flexbox. En primer lugar, vamos a establecer la altura del elemento del cuerpo en cien. Cien vh significa en realidad el 100% de la altura vertical disponible. Esto asegura que el elemento body sea tan grande como el espacio disponible en una página web. A continuación, establecer las propiedades flexbox del cuerpo se dijeron flex container a flex establecerá la dirección a la columna y estamos establecidos justificados a entre. Y ahora tenemos el pie de página firmemente enviado al fondo de la página. Bastante fácil, ¿verdad? Apliquemos esto también a los elementos del cuerpo de las otras páginas. A veces se estropea el diseño de los otros elementos de la página sin embargo. Por ejemplo, y la página de índice, se ve un poco demasiado directo. En este caso, podemos poner el encabezado y un párrafo en un div juntos para que se agrupen. Y el flexbox los trata como un solo elemento. Incluso podemos agruparlos junto con la barra de navegación para empujarlos todo el camino hasta la parte superior de la página, justo debajo de la barra de navegación. Entonces eso es todo de mi parte por ahora. En el siguiente video, vamos a hablar de crear nuestros propios componentes personalizados. Nos vemos entonces, adiós. 26. Hora 9: añadir componentes personalizados: Hola a todos, ¿Cómo va? Espero que lo estés pasando bien. Hasta el momento hemos visto una serie de elementos sencillos y elaborados en la biblioteca del estudio. Pero no necesitamos limitarnos a los componentes que podemos encontrar en una biblioteca. En este capítulo, aprenderemos todo sobre hacer nuestros propios componentes personalizados y encontrar componentes personalizados en línea. También aprendimos en código HTML personalizado a la página web. Pero empecemos agregando a la biblioteca uno de nuestros propios componentes personalizados existentes. lo mejor hemos hecho un componente que nos gusta mucho y queremos usarlo también en otros proyectos. La forma más fácil de hacer esto es agregándolo a la biblioteca. A modo de ejemplo, tomemos el pie de página que hemos creado y agregado a la biblioteca. En el panel de vista general, haga clic con el botón derecho en el pie de página y seleccione Agregar a biblioteca. Aparecerá una ventana. Podemos establecer el nombre del componente, y también podemos seleccionar los recursos que necesitan ser incluidos. Bootstrap Studio puede descifrar algunos de los recursos que necesitan ser incluidos. Por ejemplo, aquellos bloques CSS que están directamente vinculados a los elementos en el pie de página se incluirán automáticamente aquí. También podemos agregar bloques adicionales y JavaScript que necesita vincularse. En este caso, había un bloque que no vinculamos directamente, que es el bloque raíz de colon. Ese es un bloque donde hemos definido los colores del paladar. Por lo que necesitamos recolectar este bloque específicamente. En la biblioteca. Podemos encontrar nuestro nuevo componente en la carpeta usuario. Vamos a probarlo para ver si funciona en otros proyectos. Para crear un nuevo proyecto en blanco. Y arrastre y suelte el nuevo pie de página en la página. Funciona muy bien. También podemos ser agradables y subir este componente. Ojalá sea útil para algunas otras personas también. También podemos encontrar muchos componentes muy útiles los cuales son los usuarios que han subido por aquí. Por lo que podemos hacer bastante combinando componentes en el panel de resumen. Pero a veces puede ser útil agregar nuestro propio código HTML y bootstrap Studio nos permite hacer eso también. Utilizamos el bloque de código personalizado. El bloque de código personalizado es un bloque muy útil. Es simplemente un bloque vacío en el que puedes escribir o pegar tu propio código. Esto puede ser muy útil porque muchos sitios web y plataformas te ofrecen la oportunidad de generar código que luego puedes incrustar en tu propio sitio web. A continuación, vamos a servir a YouTube. Quiero encontrar un video que quiero incrustar en mi página web. Otro video, has minado el botón compartir, haz clic en él, y siguiente click en incrustar. una ventana con algún código, muestrauna ventana con algún código,selecciona el código y cópialo en el portapapeles. Back y Bootstrap studio, haga doble clic en un elemento de código personalizado y pegue el código en el espacio disponible. Desafortunadamente, el código personalizado no aparece en un lienzo. Para probar el resultado, necesitamos crear una vista previa. Para hacer de las cosas un poco más estáticas. Vamos al centro del video. Entonces, como puedes ver, es bastante simple incrustar algún código personalizado en nuestro sitio web de estudio Bootstrap. También podemos agregar código SVG en línea de la misma manera. Para aquellos de ustedes que no lo saben, SVG significa Gráficos Vectoriales Escalables. Y es una muy buena manera de incluir gráficos en tu página web. Vamos a aprender más sobre eso en el próximo video. Entonces voy a ver la célula bipolar. 27. Hora 9 - Inline SVG: Hola a todos, ¿cómo va? Bienvenido de nuevo. En este video vamos a aprender todo sobre SVG en línea. En línea SVG nos da la capacidad de incrustar gráficos vectoriales directamente en nuestro sitio web. Svg es un ejemplo de un formato gráfico. Cuando se trata de gráficos, se puede elegir ya sea gráficos ráster como PNG o JPEG o mapa de bits, por ejemplo. Gráficos vectoriales. Las imágenes ráster son esencialmente solo una cuadrícula de píxeles y cada píxel tiene un valor de color. Los gráficos vectoriales, por otro lado, son un conjunto de instrucciones de forma y color. El tipo más común de formato de archivo gráfico vectorial se llama SVG. Svg es sinónimo de Gráficos Vectoriales Escalables. En términos generales, cuando se trata de la web, es mejor usar gráficos vectoriales en lugar de gráficos ráster. Esto se debe a que generalmente, gráficos vectoriales son de tamaño de archivo más pequeño. Son independientes de resolución, por lo que no tienes que preocuparte por el tamaño de la pantalla que estás usando. Además, cualquier tipo de texto incluido en la imagen será identificado como texto, lo que significa que puede ser fácilmente recogido por el buscador, por ejemplo. Y un último beneficio del tipo de archivo SVG es que es razonablemente fácil, para que un ser humano lo lea. Al igual que HTML. Consta de elementos y etiquetas y propiedades. Por lo que puede ser más o menos entendido por los seres humanos y también puede ser interpretado inequívocamente por una computadora. Para efectos de este tutorial, he creado un logo sencillo en Inkscape. Inkscape es una aplicación de software libre y de código abierto que se puede utilizar para crear gráficos vectoriales. Es una de mis piezas de software absolutamente favoritas. Y también acaba de ocurrir que tengo cursos sobre Inkscape a los que puedes encontrar en Udemy Skillshare. O puedes encontrar algunos de mis tutoriales gratuitos en YouTube. Cuando se trata de importar imágenes SVG, podemos arrastrarlas y soltarlas igual que hacemos para otras imágenes. Una mejor manera sin embargo, sería copiar el código SVG en un bloque personalizado. De esta manera, tenemos acceso directo al contenido de la imagen. Para ello, primero abrimos el archivo SVG en un sencillo editor de texto. Habiendo abierto el archivo SVG, vemos que hay mucho que entendemos. Es decir, no me malinterpretes. Hay mucho como abracadabra en el cabello. Pero podemos ver a primera vista bastante, lo cual es claro para cualquiera. Una vez que abras un editor de texto, vamos a seleccionar todo el texto pulsando Control a y copiarlo en el portapapeles pulsando Control C. Luego volvamos al estudio bootstraps y pegarlo en un componente de código personalizado ya que aprendió a hacer en un video anterior. Ahora tenemos este código SVG incrustado en nuestro HTML. A esto se le llama SVG en línea. Desafortunadamente, bootstrap studio no puede interpretar este código en vivo ahora mismo, por lo que necesitamos crear una vista previa para ver cómo se ve. Entonces una cosa buena de usar SVG en línea es que el texto está incrustado en el sitio web. Entonces, por ejemplo, cuando se trata de Optimización de motores de búsqueda, esta es la gran ventaja. Y otra gran ventaja es que podemos hacer manualmente ediciones sencillas al texto con bastante facilidad. Por ejemplo, vamos a cambiar el texto en el logotipo, sólo buscamos para encontrar un texto y editado. También es bastante sencillo cambiar el color de cualquiera de los objetos del logotipo. Solo necesitamos cambiar la propiedad de relleno. Incluso podemos vincular estos colores a los colores variables, que hemos definido en un video anterior. De esta forma, si decidimos cambiar nuestro paladar, se actualizará el logotipo. Y otro realmente genial pagar sobre SVG en línea es que incluso podemos usar JavaScript para controlar las propiedades de los elementos SVG. En caso de que te interese JavaScript, aprenderemos más sobre JavaScript en un futuro capítulo. Algo de lo que debemos estar conscientes sin embargo, es que debido a que se trata de un código personalizado, no podemos usar el panel de apariencia para establecer el estilo. Pero hay una manera rápida de evitar eso. Podemos configurar fácilmente la clase manualmente y luego iniciar el estilo. Entonces eso es todo por ahora. Gracias por ver. En el siguiente capítulo vamos a aprender todo sobre la adición de formularios. Y vamos a aprender sobre la adición de formularios inteligentes, en los que el usuario es capaz de enviar el formulario rellenado directamente a nuestra dirección de correo electrónico. Entonces eso es todo por ahora. Gracias por ver. Te veré ahí. Que tengas un buen día. Adiós. 28. Hora 10 - formas: Hola a todos. Espero que lo estés pasando bien. Bienvenido al siguiente video. En este video, vamos a hacer un formulario simple usando los elementos de formulario de bootstrap studio. Entonces, empecemos. Primero, arrastremos un contenedor a la página. Y arrastremos un formulario al contenedor. Ponemos un encabezado en el interior y renombramos el arenque a la forma de orden. Empecemos dando a estos formularios algún formato básico. Por ejemplo, agreguemos un borde y una sombra de gota solo para que sea un poco más agradable de mirar. Eso también usa algunas filas y columnas para crear un diseño simple. Y poblaremos nuestras filas y columnas ancho, botones de radio y etiquetas. Por lo que al final tenemos dos columnas con cada una con cuatro botones de radio. El primero es el tamaño, y el segundo es el color. De acuerdo, tenemos una forma muy, muy básica. A ver si funciona. Iniciando la vista previa. Funciona más o menos, pero tenemos un problema. Podemos seleccionar cualquier número de botones de radio que queramos. Por lo general, los botones de radio funcionan de tal manera que al seleccionar uno, automáticamente anula la selección de otro. Podemos hacerlo en el panel Opciones dando un nombre a los botones de radio. Los botones de radio con el mismo nombre pertenecerían al mismo grupo. Y solo podrás seleccionar uno dentro de un grupo a la vez. Por lo que ahora tenemos dos grupos, uno para tamaño y otro para color. Vamos a probarlo. Sí, mucho mejor. De acuerdo, a continuación, agreguemos otra fila y dos columnas. Y poblemos las columnas con una etiqueta y una entrada de correo electrónico. También podemos establecer el ancho relativo 2, 3, y 9. Ya que hemos agregado una entrada de correo electrónico en el formulario, sólo aceptaremos una entrada en forma de dirección de correo electrónico. En otras palabras, necesita tener ese símbolo de agregar. Duplicemos la fila. En esta fila, le daremos al usuario una opción para agregar un logotipo personalizado. Vamos a reemplazar la entrada de correo electrónico con el campo de entrada de archivo. Ahora el usuario tiene la opción de adjuntar un archivo. Añadamos un div y hagamos ese div en la parte inferior. Podemos establecer la alineación para alinear, para escribir, para asegurarnos de que el botón se empuje hacia la derecha. Y vamos a cambiar el texto del botón a enviar. De acuerdo, entonces ahora tenemos un botón de funcionamiento. Podemos hacer click en él, pero no hace nada. Pero oye, podemos hacer click en él. Entonces eso es lo principal, ¿verdad? Y sólo bromeando, sólo bromeando. No, vamos a hacerlo para que cuando el usuario haga clic en este botón, todos los datos que el usuario rellenó aquí sean enviados a nuestra dirección de correo electrónico. Vamos a usar formas inteligentes para lograr eso, lo cual es bastante fácil, pero no lo vamos a hacer ahora. Eso lo vamos a hacer en el siguiente video. Mientras tanto, solo hagamos que el formulario se vea un poco más bonito limpiando solo un poquito usando el panel de apariencia. Por lo que ahí tenemos una forma básica. Hemos echado un vistazo a los botones de radio y la entrada de correo electrónico y una entrada de archivo, pero hay más elementos de formulario disponibles. Basta con echar un vistazo bajo el encabezado del formulario en la biblioteca. También contamos con una serie de formularios prefabricados disponibles, que puedes encontrar bajo formularios de interfaz de usuario. Como mencioné en el siguiente video, vamos a convertir esta forma en una forma activa. Entonces gracias por ver, y nos vemos en el siguiente video. 29. Hora 10 horas: formas inteligentes: Hola a todos. ¿Cómo va? En el video anterior, creamos una forma más bonita como esta, que se ve bien, pero no hace nada. Por lo que en este video vamos a utilizar formularios inteligentes para que el usuario pueda llenar este formulario y dar click en el botón Enviar. Cuando el usuario haga clic en este botón enviar, se enviará un correo electrónico con todos los datos a nuestra dirección de correo electrónico. En Bootstrap Studio. En realidad es bastante sencillo implementar esto. Entonces, empecemos. En primer lugar, vaya al panel de resumen y seleccione un formulario. Después ve al panel Opciones. Y togas formas inteligentes. Por aquí, podemos seleccionar la dirección de correo electrónico donde se enviarán los datos del formulario. Ya tengo una dirección de correo electrónico aquí. Pero si no tienes uno, debes dar click en manejar para agregar uno. Ingresa la dirección aquí, y haz clic en Crear. Es necesario verificar la dirección de correo electrónico utilizando el código de verificación que Bootstrap Studio te enviará. Ya que ya he agregado un destinatario, nuestro saltó un paso. Una vez que hayas agregado al destinatario, vuelve al panel de opciones y elijalo de esta lista desplegable. Para asegurarse de que el usuario no deje ninguno de los campos en blanco. Podemos utilizar este campo de validación. Si lo configuramos como requerido, el usuario recibirá un mensaje de error. Si lo dejan en blanco. Seleccionemos todos estos botones de radio usando la tecla de control para seleccionar más de uno a la vez e ir a la validación y seleccionar requerido. Y hagamos lo mismo con el campo de entrada de correo electrónico. Por último, es importante para nosotros establecer el tipo de patrón a presentar. De acuerdo, Ahora estamos listos. Veamos la inacción del smartphone creando una vista previa. Como puedes ver cuando intentamos enviarnos sin rellenar los campos correspondientes, obtenemos un mensaje de error. Incluso necesitamos asegurarnos de que sea una dirección de correo electrónico válida. Podemos subir un archivo. Al hacer clic en el botón Enviar, obtenemos esta captura para demostrar que no somos robots tratando de apoderarse del mundo de forma natural. De acuerdo, ha llegado nuestro correo electrónico. Echemos un vistazo a nuestra bandeja de entrada para ver más específicamente qué dice. El correo electrónico contiene tres piezas de información y el adjunto. Dijimos los nombres de esos botones de radio a tamaño y color. Entonces por eso vemos talla y color aquí. Cuando miramos el valor sin embargo, vemos que realmente no tiene sentido. Tenemos S por talla y encendido por color. Además, el nombre de la dirección de correo electrónico no tiene sentido. Entonces volvamos al estudio bootstrap para arreglar esto. Establezcamos un valor apropiado para cada botón de radio. Y para la dirección de correo electrónico. Pongamos el nombre. De acuerdo, vamos a probarlo en un adelanto. Genial, como puedes ver, ahora es mucho más fácil entender el nuevo envío de formulario. Por lo que como puedes ver, Bootstrap Studio hace que sea bastante fácil agregar un formulario inteligente a nuestra página web. Podemos usar esto para crear nuestros propios formularios de contacto son en formas orales, etcétera, etcétera. Pero si queremos crear una funcionalidad más avanzada, necesitaremos usar JavaScript. Y de eso se va a tratar el próximo capítulo. Empezaremos desactivando esta dirección de correo electrónico y agregaremos una casilla de verificación opt in. Mucha gente se siente intimidada por codificar, pero les aseguro que no hay absolutamente ninguna necesidad. La codificación es en realidad mucha diversión, pero no la necesitaremos para el resto del curso. Entonces si crees que JavaScript no va a ser útil para ti, o si ya conoces script Java, o incluso si simplemente no te apetece o razón por la que epi sienta ganas de saltarse el siguiente capítulo, entonces adelante y saltarle. Y los veo en el último capítulo sobre exportación y publicación. Si por otro lado, te entusiasma aprender un poco sobre JavaScript, entonces te veo en el siguiente capítulo. Tanto tiempo por ahora, adiós. 30. (Opcional: la hora 11 - Javascript: consejos para noobs: En este video, vamos a aprender un poco sobre JavaScript. En este capítulo, podrás seguir junto con los pasos para crear esta casilla de verificación opt in, cual puede activar y desactivar esta entrada de correo electrónico. En este capítulo, voy a asumir que eres un principiante completo. Entonces vamos a ser bastante meticulosos. Pero antes de que empecemos, me gustaría cubrir rápidamente los consejos para los codificadores principiantes. Punta número uno es ser preciso, muy preciso. Resulta que las computadoras no son muy inteligentes. Incluso lo que parecería un error tipográfico insignificante podría potencialmente romper tu código. Entonces si tu código no está haciendo lo que esperas, es muy posible que simplemente porque hiciste un error tipográfico, puede ser muy frustrante para los principiantes. Pero me temo que esa es sólo una de las realidades de la codificación. Y a medida que tengas más experiencia, te acostumbrarás más a ser preciso todo el tiempo. Punta número dos, prueba el código. Muy, muy a menudo para principiantes, no es exagerado probar el código para cada línea que añadas. Después de todo, es mucho más fácil encontrar un error tipográfico en una sola línea de código en lugar de en 100 líneas de código. Y punta número tres, piensa como un robot. En otras palabras, trate de pensar de manera muy lógica y sistemática. La codificación es un gran ejercicio para el cerebro. Cuanto más codificas, más práctica consigues en pensar lógica y sistemáticamente. Porque esa es la mejor manera de averiguar por qué tu código no está haciendo lo que querías hacer. Y punta número 4, estar en línea todo el tiempo. La codificación no es como aprender un idioma donde básicamente tienes que aprender mucho de memoria. Se trata más de entender la ropa y las estructuras. Y se trata más de poder buscar cómo hacer cosas. Y el mejor lugar para buscar cosas es internet. De acuerdo, Entonces con esos cuatro consejos en mente, empecemos. 31. (Opcional: hora 11 - Javascript: en click: Bienvenidos de vuelta a todos. En este video, añadiremos esta casilla de verificación y usaremos JavaScript para detectar, siempre que alguien haga clic en una casilla de verificación. Coloque una casilla de verificación con etiqueta y ajuste la mano de obra para leer. Por favor envíenme boletines y material promocional y todas esas cosas. A continuación, seleccione la entrada de correo electrónico. Y bajo el estado en el panel Opciones. Toggle deshabilitado. Dumb para agregar el archivo JavaScript en el panel de diseño, vaya al encabezado JavaScript. Haga clic derecho en encabezado y elija Nuevo y elija Archivo JS. Solo planea usar un archivo JavaScript. Entonces seamos muy imaginativos y lo nombremos java script.js. Por lo que el objetivo por ahora es crear una función simple que se ejecute siempre que el usuario haga clic en una casilla de verificación, haga doble clic en un archivo JavaScript para editarlo. Y la siguiente función, casilla de verificación de función hizo clic en corchetes abiertos, cierres corchetes, corchetes rizados, alerta, corchetes abiertos, hola, cerrar corchetes. Permítanme explicarle esto rápidamente. Acabamos de definir una función y el nombre de esa función se llama checkbox click cada ping entre los corchetes rizados es lo que hace la función. En este caso, sólo tenemos una línea en nuestra función. Crea un cuadro de alerta con el texto Hola. Por lo que hemos creado una función que hace algo, pero nunca llamamos a esa función. Entonces lo que nos gustaría hacer es que nos gustaría activar esta función a veces, digamos que cada vez que alguien hace clic en una casilla de verificación, desencadena la disfunción. Para ello, selecciona la casilla de verificación y abre el panel de atributos. Añadamos un onclick con la casilla de verificación de valor pulsada. Entonces cada vez que hacemos clic en esta casilla de verificación, va a activar la casilla de verificación de la función clicada. Tenga en cuenta que el valor de esta clave debe ser exactamente el mismo que el nombre de la función. Si incluso hay un pequeño error tipográfico, no va a funcionar. Vamos a crear una vista previa para probarla. Funciona, genial. Ahora que sabemos que funciona, podemos pasar al siguiente paso. El siguiente paso es averiguar si esta casilla de verificación está o no. Eso lo vamos a hacer en el próximo video. Nos vemos ahí. 32. (Opcional) H1 11 - Javascript: si y otro otro: Hola a todos y bienvenidos de nuevo. En el video anterior, creamos una función simple y utilizamos el atributo on click para activar la función cada vez que alguien hace clic en una casilla de verificación. En este video, extenderemos esta función para que la función nos permita saber si se había hecho clic en la casilla de verificación no en el archivo JavaScript. Crear una nueva variable llamada check. Utilice document.getElementById para vincular la casilla de verificación a la variable. Esta función getElementById vincula el elemento con este ID y almacena toda la información en esta variable check. Añadamos una alerta para ver si la casilla de verificación está marcada o no. En este caso, check es una de las propiedades de la variable check. Y puede ser cierto o falso. Vamos a crear una vista previa. Y como ves, cuando hacemos clic en la casilla de verificación, el resultado es cierto. Y cuando desmarcamos la casilla de verificación, el resultado es falso. A continuación, agreguemos una condición simple. Usaremos una cláusula llamada IF. Por cierto, podemos usar dos barras inclinadas como esta para comentar el código. Esto significa que el navegador simplemente ignoraría el código. Podemos usar estos comentarios para guardar algunas pistas y explicación para nosotros mismos cuando volvamos a mirar este código más tarde o para otras personas cuando estén examinando nuestro código, solo voy a mantener esta línea de código como comentario porque soy responsable olvida cómo configurar un cuadro de alerta y no quiero tener que buscarlo de nuevo más tarde en línea. Entonces solo lo voy a dejar aquí como recordatorio. Comience con la palabra clave if, seguido de un par de corchetes. Entre esos dos paréntesis de grupo, tenemos una expresión que puede ser verdadera o falsa. En este caso, marcado o sin marcar puede ser verdadero o falso. Y agreguemos una alerta. Alerta sólo aparecerá si el punto de comprobación de expresión marcado es verdadero. Entonces, en otras palabras, si efectivamente se ha comprobado la casilla de verificación, y vamos a probarla. Por lo que ahora tenemos la situación donde se marca la casilla de verificación cubierta. ¿ Y si la casilla de verificación no está marcada? Para eso podemos usar la palabra clave else. Else siempre se usa en combinación con if. En este caso tenemos si se marca la casilla de verificación, luego hacer esto en todos los demás casos a esto. Y vamos a probarlo para ver si funciona. Entonces ahora tenemos una estructura clara la cual puede determinar si se ha hecho clic o no en la casilla de verificación. Pero no sólo nos gustaría enviar alertas, realidad nos gustaría activar y desactivar el cuadro de entrada de correo electrónico. Y eso es lo que vamos a hacer en el próximo video. Pero para nosotros, es hora de tener un descanso. Así que vamos y ten un descanso corto o largo. Y te voy a ver en el siguiente video. Adiós. 33. (opcional: hora 11 - Javascript: desactivar el campo de entrada: Hola a todos. En el video anterior, agregamos un JavaScript simple que detecta cada vez que alguien hace clic en una casilla de verificación y también determina si actualmente se hace clic en la casilla de verificación. Aprendimos sobre escribir funciones y activarlas con la palabra clave onclick. Aprendimos sobre encontrar un elemento por su ID usando una función llamada get element by ID. Y aprendimos sobre la creación de condiciones simples usando las palabras clave if y else. En este video, extenderemos el script para activar y desactivar el campo de entrada de correo electrónico dependiendo del valor de la casilla de verificación. Entonces, empecemos. Primero necesitamos poner toda la información de esa caja de entrada en una variable debe ser más precisa. Necesitamos una variable que apunte al cuadro de entrada de correo electrónico. Entonces vamos a dar el cuadro de entrada de correo electrónico y ID y usar document.getElementById para crear una variable que apunte a ese cuadro de entrada de correo electrónico. Y ahora que tenemos una variable apuntando a ese cuadro de entrada específico, podemos establecer sus propiedades. Dijimos que el inmueble con discapacidad forzar en caso de que la casilla de verificación esté activa. Y lo configuramos como verdadero si no se ha marcado la casilla de verificación. Y ahí lo tenemos. Agregamos una funcionalidad sencilla a esta forma. Si reviso la casilla de verificación, habilita la entrada EMA. Y si desmarco la casilla de verificación, la desactiva. Por lo que debemos estar orgullosos de nosotros mismos. No obstante, sí tenemos un efecto secundario no deseado. El formulario restablece automáticamente la casilla de verificación después del envío, pero no vuelve a establecer el campo de entrada de correo electrónico demasiado deshabilitado. Para solucionarlo, podemos escribir un script que restablezca la forma de la forma que queramos. Y podemos activar ese script siempre que alguien haga clic en el botón enviar, crear una nueva función llamada enviada y vincularla al botón enviar agregando un atributo onclick. Recuerda, tiene que ser exactamente igual que el nombre de la función. Vamos a probarlo. De acuerdo, funciona, pero desafortunadamente, resulta en otro problema no deseado. Cuando desactivamos el campo, también desactivamos la validación. Eso significa que hemos creado una situación en la que alguien podría introducir una dirección de correo electrónico no válida. Para resolver esto, escribiremos nuestra propia función de verificación de correo electrónico. Suena difícil, pero no te preocupes con un poco de ayuda de Internet, en realidad es bastante fácil. Por lo que espero que se unan a mí en el próximo video donde terminaremos nuestro formulario. Nos vemos pronto. Adiós. 34. (Opcional: hora 11 - Javascript: Verifica la dirección de correo vendido: Hola a todos y bienvenidos de nuevo. En el último par de videos, hemos creado este formulario y hemos creado esta casilla de verificación que habilita o deshabilita este campo de entrada. Tenemos un pequeño problema sin embargo. En resumen, necesitamos escribir un guión corto que compruebe si este es o no un correo electrónico válido. único problema es que no tengo ni idea de cómo hacerlo. Pero eso está bien bajo, para eso está Internet. Entonces hagamos una búsqueda rápida en línea y busquemos Java Script, comprobemos correo electrónico válido. Bastante rapido. Encontramos la siguiente página web. Desnatando a través. Vemos este fragmento de código que necesitamos. Si te interesa, puedes leer todo el artículo. Es bastante corto, y también es informativo. Pero por ahora, solo copiemos y peguemos este fragmento de código en nuestro archivo JavaScript. Examinemos rápidamente el código y comprobemos las cosas más importantes. En primer lugar, es una función llamada correo electrónico es válido. En segundo lugar, vemos aquí que necesitamos darle un insumo. Necesitamos proporcionar una dirección de correo electrónico. Y por último, vemos que la función devuelve algo. En otras palabras, hay una salida a esta función. El resultado es verdadero o falso, verdadero si se trata de un correo electrónico válido y falso si no es un correo electrónico válido. Por lo que permite usar esta función para determinar si hay un correo electrónico válido sobre eso. Y en nuestra propia función presentada, combinaremos esto con una cláusula if. Sólo desactivaremos el campo de correo si el correo proporcionado es un correo electrónico válido. Entonces echemos un vistazo a lo que hemos hecho aquí. En primer lugar, tenemos la palabra clave if. Para evaluar la condición de la palabra clave if, primero llamamos a la función email es válido. Recuerda que el correo electrónico de la función es válido, requiere una entrada. En este caso, utilizamos una de las propiedades del campo de entrada de correo electrónico. Específicamente, utilizamos la propiedad de valor. Correo electrónico es función válida devuelve true si la entrada es un correo electrónico válido y devuelve false si la entrada no es un correo electrónico válido. Entonces en el caso de que hayamos descubierto que se trata de un correo electrónico válido, podemos seguir adelante y desactivar el campo de entrada de correo electrónico. Si no es un correo electrónico válido. En ese caso, no pasará nada. Y desde ahora el campo de entrada de correo electrónico no ha sido deshabilitado. El proceso de verificación de bootstrap se mantenía en vigor. Y ahí lo tenemos. Vamos a probarlo. Sí, por fin funciona. Entonces eso es todo de mi parte acerca de la codificación. Si estás interesado en aprender más codificación, te recomiendo este sitio web. En cuanto a nosotros, vamos a seguir adelante con el capítulo final, que se trata de exportar y publicar. Nos vemos pronto. Adiós. 35. Hora 12: Exportar y publicar los ajustes: Bien hecho. Llegamos al capítulo final. En este capítulo, vamos a aprender sobre la publicación y exportación. Empezaremos con algunos ajustes de publicación y exportación. Empecemos echando un vistazo a algunos de los ajustes. Haga clic en el icono Configuración en la barra superior. Bajo el rubro SEO, vemos que podemos establecer el título y la descripción. El título y la descripción se pueden ver en la página de resultados de búsqueda. Por lo que escribir un título y descripción útiles es muy importante para que tu público objetivo haga clic en tu sitio. Podemos crear un sitemap para. El mapa del sitio ayuda al motor de búsqueda a obtener una visión general de la estructura de su sitio. Podemos utilizar iconos de fav para crear un icono para nuestra página web. En la vista previa, vemos cómo se ha agregado el icono y el título a la pestaña del navegador. Buscando en el código HTML, podemos encontrar esto de nuevo en la cabecera del documento. Y también podemos añadir etiquetas Meta. Las etiquetas meta simplemente proporcionan información sobre el sitio web y esta información es bastante útil para los motores de búsqueda. Vemos que ya tenemos la descripción entre nuestras etiquetas Meta. Añadamos algunas palabras clave. Y también añadiré una etiqueta de autor. También podemos añadir otro tipo de etiquetas Meta, por ejemplo, el idioma de la página web y otros. Si quieres conocer más sobre los diferentes tipos de etiquetas Meta que existen, te recomiendo este sitio web. Cuando se trata del código HTML generado, podemos encontrar toda esta información en la cabecera de nuestro HTML. De acuerdo, a continuación, publiquemos el sitio web. 36. Hora 12: publicación: De acuerdo, a continuación, publiquemos el sitio web. Vamos a publicarlo a través del estudio Bootstrap. Esto es bastante bueno porque de esta manera, ni siquiera necesitamos preocuparnos en absoluto por el hosting. Para publicar, primero necesitamos configurar un nombre de dominio. Haga clic en Publicar, haga clic en el botón, administrar sitio web, y haga clic en Agregar sitio web. Podemos usar ya sea un subdominio de estudio bootstrap, o podemos vincular un dominio existente. Si elegimos un subdominio, nuestro sitio web terminará en diseño dot bss dot. También tenemos que elegir cuánto tiempo para mantener el dominio. Si queremos mantenerlo al día indefinidamente, podemos recoger nunca. Pero tal vez ya tengas un dominio para subir el sitio web con un dominio existente, puedes o bien primero exportar todo lo que vamos a aprender en el siguiente video. O bien puedes usar Cloudflare para crear un nuevo registro DNS. Haga clic en el botón Comprobar y siga las instrucciones proporcionadas. Podemos encontrar instrucciones más detalladas en este sitio web. Entonces, ya sea que utilice el subdominio de Bootstrap studio o si utilizó un dominio existente. Después de eso. Haga click en Cerrar. Ahora que tenemos un dominio configurado en el menú desplegable, elige el dominio que acabamos de crear, y haz clic en, Publicar. Ahí lo tenemos. Nuestra página web ya está disponible en línea. Bastante fácil, ¿verdad? Algunas personas, sin embargo, podrían preferir exportar primero el sitio web y luego subirlo a un servidor si prefieres esa forma de hacerlo. Eso es lo que vamos a aprender en el próximo video. Nos vemos ahí. Adiós por ahora. 37. Hora 12: exportar: Exportar el proyecto a HTML, CSS, y JavaScript en Bootstrap Studio es una cuestión sencilla. Simplemente haga clic en Exportar. En caso de que quiera incluir un sitemap, asegúrese de incluir la URL de su sitio web. Seleccione el directorio de destino, y haga clic en el botón Exportar. Vamos a la carpeta de exportación para inspeccionar nuestros resultados. Podemos ver todos nuestros archivos HTML y podemos probar los archivos HTML abriéndolos en un navegador. O podemos inspeccionar el código HTML generado abriéndolos en un sencillo editor de texto. También contamos con una carpeta de activos. El directorio de activos contiene todos los recursos del sitio web, incluyendo imágenes, archivos CSS, JavaScript, etcétera. Pero ahora nos gustaría conseguir este sitio web en línea. Para ello, necesitamos un host web. Yo mismo tengo un host web llamado BAA cloud. Otros hosts web populares incluyen Host, Gator, Bluehost, y muchos más. Asegúrate de que el host que elijas incluye al menos ver panel C para es lo que usamos para subir el sitio web exportado al servidor ser a Cloud ofrece FTP. Podemos utilizar FTP con un cliente como FileZilla para compartir archivos fácilmente entre un servidor y su computadora. Pero no todos los hosts ofrecen FTP. Por lo que en este video, demostraré cómo podemos subir nuestro sitio web usando paneles C o File Manager. Cpanel es un gestor de archivos bastante básico. Es un poco complicado subir múltiples estructuras de carpetas. Para simplificar esto, primero voy a comprimir mi sitio web exportado. Y entonces sólo necesito subir un archivo. Y una vez subido, extrae los archivos por aquí. Y ahora nuestra página web está en línea. Eso es todo por ahora. Nos vemos en el siguiente y último video, mi Bye. 38. Conclusión y reflexiones finales: Buen trabajo a todos. Hemos llegado hasta el final de este curso. Espero que lo hayan disfrutado. Recuerda, al aprender un nuevo ping, suele ser una buena idea obtener experiencia práctica para solidificar lo que has aprendido. Como proyecto, haz tu propio sitio web o página web y publícalo. O alternativamente, podrías crear tu propio componente avanzado. Cuando haya terminado, publique un enlace para mostrarlo. De esta forma, te puedo dar algunos comentarios y puedes compartir tu creación con otros. En este curso, hemos aprendido bastante. Hemos aprendido casi todo de lo que bootstrap studio tiene para ofrecer. Pero recuerda, todavía hay muchas cosas útiles y divertidas por aprender por ahí. A medida que los estudiantes de toda la vida probablemente nunca se quedarán sin cosas útiles e interesantes para LA. Entonces eso es todo de mi parte por ahora. Buena suerte y buen aprendizaje. Adiós.