Hay muchas maneras diferentes de edificar un sitio webposicionamiento en buscadores ventajas >. Desde WordPress, Joomla!, Drupal y otros creadores de sitios web, hasta HTML puro y herramientas como Dreamweaver.
En resumen, si necesitas un sitio, puedes localizar uno entre muchos métodos para crearlo y,
en este tutorial para principantes, aprenderás uno más llamado Bootstrap.
Bootstrap es un marco de trabajo o bien
frameworkde
front-endque te ayuda a crear sitios web más rápida y fácilmente.
Desarrollado en un principio por Twitter, Bootstrap ya se emplea para muchas cosas,
desde el desarrollo de aplicaciones web hasta temas de WordPress.
Es absolutamente libre, versátil y también intuitivo.
Razones suficientes para que escribamos
un tutorial detallado de Bootstrap que te enseñe todo cuanto precisas saber.
A continuación,
aprenderás qué es Bootstrap, cómo configurarlo y construir una página de aterrizaje o bien
landing pagesencillapara un sitio paso a paso.
Al final, queremos que tengas un conocimiento básico de cómo emplear Bootstrap para que puedas seguir aprendiendo.
La primera parte de este tutorial para principiantes se concentra en
saber exactamente qué es Bootstrap.
Sólo si sabes con lo que estás lidiando,
puedes empezar a comprender cómo usarlo.
Como ya sabéis, Bootstrap fue creado originalmente por Twitter. Un pequeño conjunto de desarrolladores lo reunió como
una herramienta interna para ayudar a crear interfaces web coherentes.
El proyecto siguió creciendo hasta el momento en que por último decidieron
lanzarlo al público para su uso gratuito en 2011.
Desde entonces, el apoyo a Bootstrap ha continuado tanto por parte de ciertos desarrolladores originales como de un enorme conjunto de cooperadores.
Ha pasado por varias actualizaciones importantes a lo largo de los años (la última, Bootstrap cuatro, en el mes de enero de dos mil dieciocho) que, entre otras cosas,
han añadido su renombrado sistema de cuadrícula, diseño plano, un enfoque para móvil y CSS moderno.
Por ahora, el
framework
se encuentra entre las herramientas de desarrollo web más populares de la red.
Entre otras cosas, se ha transformado en el segundo proyecto más señalado de Github. Sin embargo,
¿qué hace exactamente?
Como se mentamos en la introducción, Bootstrap
es un marco de trabajo o
frameworkpara el desarrollo
front-end
.
No te preocupes si no sabes lo que eso significa, yo tampoco lo sabía cuando empecé a armar este artículo.
En la programación de ordenadores,
un
frameworkes algo así como una biblioteca. Contiene herramientas, piezas y funciones existentes que se pueden emplear para realizar labores estándar de forma más rápida y sencilla.
En el caso de campañas de mailing ,
estas labores estándar son la creación de patrones de diseño como formularios, menús, columnas, botones y otros componentesque se necesitan con cierta frecuencia en los sitios web.
Bootstrap te ayuda a configurarlos ofertando
un gran número de clases de CSS que puedes aplicar fácilmente a elementos HTMLpara crear los componentes del sitio que necesitas.
De esta manera,
puedes crear páginas web complejas desde HTML estándar y personalizarlas según sus necesidades.
Además,
Bootstrap viene con una serie de plugins jQueryque pueden suministrar funcionalidad auxiliar como carruseles, botones, consejos de herramientas y más.
Si todavía no estás seguro de cómo te ayuda esto, no te preocupes, los próximos ejemplos lo aclararán.
Lo esencial es rememorar que
Bootstrap te ofrece muchos atajos para crear páginas web que te ahorrarán tiempo y energía.
Todo lo que
necesitas es una comprensión básica de HTML y CSSpara crear sitios acomodables a móviles y compatibles con todos los navegadores modernos.
¿Todo bastante claro hasta ahora? Entonces veamos cómo funciona precisamente.
Para usar Bootstrap,
primero precisas integrarlo en tu ambiente de desarrollo, también conocido como página web.
Para ello,
tienes 2 posibilidades diferentes:
Sin embargo, para ambos,
primero necesitas algo en lo que cargarlo.
Como primer paso,
crearemos una plantilla HTML simple, como base donde usaremos Bootstrap.
Para ello, lo primero que debes hacer es
crear una carpeta en tu PC o bien servidorpara los ficheros de proyecto. En un caso así, simplemente lo llamaremos bootstrap.
Aquí,
crea un nuevo archivo de texto y llámalo index.html.
Ábrelo con un editor de texto de tu elección(por ejemplo, Bloc de notas++ o Texto excelente) y después queja el código de abajo en él:
¡No olvides guardar tu archivo antes de proseguir adelante!
Como ya hemos explicado, Bootstrap
consiste primordialmente en hojas de estilo o
style sheetsy
scripts
.
Como tal,
puedes cargarlos en el encabezado y pie de página de tu página webcomo otros activos tales como fuentes adaptadas.
El marco de trabajo o bien
frameworkofrece una ruta de acceso CDN (red de entrega de contenido o bien
content delivery network) para ello.
Puedes encontrarla en la página de descargas de Bootstrap.
Para poner Bootstrap en tu página, sencillamente
pega el código de abajo en la sección <head> de tu plantilla.
Cuando guardes el fichero,
cualquier navegador en que lo abras cargará automáticamente los activos de Bootstrap.
Usar el método recóndito es una gran idea,ya que muchos usuarios ya tienen el
frameworken la caché de su navegador.
Si ese es el caso, no tendrán que recargarlo al llegar a tu sitio, lo que
conlleva un tiempo de carga de la página más rápido. Como consecuencia, este es el método recomendado para sitios en vivo.
Sin embargo, para probar y desarrollar, o si quieres ser independiente de una conexión a Internet,
también puedes conseguir tu propia copia de Bootstrap.
Una forma alternativa de
configurar Bootstrap es descargarlo a tu disco duroy usar los archivos localmente.
Las opciones de descarga se hallan en exactamente el mismo sitio que los enlaces a la versión recóndita.
Aquí,
asegúrate de conseguir los archivos CSS y JS compilados. No necesitas los archivos fuente.
Una vez hecho esto,
descomprime el archivo y copia su contenido en el mismo directorio que index.html.
Después de eso, puedes cargar el CSS de Bootstrap en su proyecto de la siguiente manera:
Notarás que
esto incluye la senda de archivo en la que se encuentra el fichero de Bootstrap. En tu caso, asegúrate de que la senda corresponde a tu configuración real.
Por ejemplo, los nombres de
los directorios pueden diferir si has descargado una versión diferente de Bootstrap.
Para conseguir la funcionalidad completa de Bootstrap,
también precisas cargar la biblioteca jQuery.
Aquí, también
tienes la posibilidad de cargarlo remotamente o bien alojarlo localmente.
En el primer caso, encontrarás el link a la última versión de jQuery. Puedes utilizarlo para cargar la librería en tu página poniendo la línea de código de abajo inmediatamente antes de donde dice </body> en tu página.
Alternativamente,
puedes descargar jQuery, descomprimilo y colocarlo en la carpeta del proyecto. Luego, inclúyelo en el mismo sitio de tu fichero de esta manera:
Una vez más,
asegúrate de que la ruta corresponde a su configuración.
El último paso para configurar Bootstrap es
cargar la biblioteca JavaScript de Bootstrap.
Éstas biblioteca
se incluye en la versión descargada de Bootstrapy también encontrarás links a fuentes recónditas en exactamente el mismo sitio que antes.
Sin embargo,
lo cargaremos en un sitio diferente al de la hoja de estilo o
style
. En vez del encabezado, ve al pie de página, justo después de la llamada a jQuery.
Puedes llamarlo remotamente así:
O también de forma local como:
Si ha seguido los pasos anteriores adecuadamente,
debería terminar con un fichero como este para la solución remota:
Alternativamente,
si estás hospedando Bootstrap localmente, tu plantilla de página debe parecerse al código de abajo:
Si eso es lo que tienes y has guardado tu trabajo, ya estás listo para pasar al siguiente paso.
Lo precedente fue, sin duda, mucho trabajo de preparación. No obstante, no ha sito tan muy difícil, ¿verdad?
Además, ahora empieza la diversión.
Por el momento, cuando navega a tu lugar de muestra,
simplemente deberías ver una página en blanco. Es hora de mudar eso.
Lo primero que queremos hacer es añadir una barra de navegación en la parte superior de la página.
Esto permite a tus visitantes moverse por tu lugar y descubrir el resto de tus páginas.
Para ello,
utilizaremos la clase navbar.
Este es uno de los elementos por defecto de Bootstrap. Crea un elemento de navegación que
responde de manera predeterminada y que se contraerá automáticamente en pantallas más pequeñas.
También ofrece soporte incorporado para
agregar marcas, esquemas de color, espacios y otros componentes.
Lo usaremos como abajo y lo vamos a poner justo debajo de la etiqueta <body>:
Algunas explicaciones sobre el código:
¿Por qué explico tanto esto?Porque ese es la meta de Bootstrap.
Tienes todos estos estándares que le dejan crear rápidamente elementos con ciertas clases HTML y CSS.
No es necesario escribir ningún CSS para proporcionar estilo, todo ya está configurado en Bootstrap.
Además, todo es móvil y responde desde el primer momento
¿Empiezas a ver lo útil que es esto?
Lo precedente es suficiente para añadir una barra de navegación a su sitio. Sin embargo, de momento, todavía parece muy poco, puesto que se ve así:
Eso es por el hecho de que no tiene mucho estilo. Si bien
es posible añadir colores por defecto(por poner un ejemplo, dando a la barra de navegación una clase como
bg-dark navbar-dark), en su lugar queremos añadir los nuestros propios.
Afortunadamente, si quieres mudar el estilo predeterminado,
no debes vadear una gran biblioteca de hojas de estilo y hacer los cambios a mano.
En cambio, al igual que con un tema hijo de WP,
puedes añadir tus propios ficheros CSS que puedes utilizar para sobreescribir el estilo existente.
Para ello, simplemente
crea un fichero en blanco con su editor de texto y llámalo main.css.
Guárdalo, y después añádelo a la sección primordial de tu lugar Bootstrap así:
Este es el código para una hoja de estilo que radica en el directorio primordial.
Si decides poner tu nombre dentro de la carpetita css, asegúrate de incluir la senda adecuada en el enlace.
Desde aquí,
puedes añadir CSS adaptado a tu sitio. Por ejemplo, para mudar el estilo de la barra de navegación y sus elementos, puedes usar marcas como esta:
Y aquí puedes ver el resultado:
Se ve mejor que ya antes, ¿no?
Después de la barra de navegación,
lo siguiente que deseas es un contenedor para el contenido de la página.
Esto es muy fácil en Bootstrap puesto que todo lo que precisas para esto es
esto bajo la etiqueta navbar:
Notas la clase
container-fluid. Esta es otra de esas clases por defecto de Bootstrap. Aplicándolo al elemento div, se incorpora automáticamente un montón de CSS a él.
La una parte de
fluidse encarga de que el contenedor
se estire durante todo el ancho de la pantalla. También está el contenedor, al que se le han aplicado anchos fijos, con lo que siempre y en toda circunstancia habrá espacio a los dos lados de la pantalla.
Sin embargo,
si ahora recargas la página, no verás nada(salvo que utilices las herramientas para desarrolladores). Esto se debe a que sólo has creado un elemento HTML vacío.
Esto empezará a mudar ahora.
Como siguiente paso en este tutorial de Bootstrap, queremos
incluir una imagen de fondo a pantalla completa para el encabezado de nuestra página de aterrizaje o
landing page
.
Para ello,
tendremos que emplear algo de jQuerypara hacer que la imagen se extienda hasta el final de la pantalla.
Hazlo de exactamente la misma manera que incluyes CSS adaptado. Primero, crea un fichero de texto con el nombre
main.jsy colócalo dentro de la carpeta de tu sitio.
Luego, llámalo antes de la etiqueta de cierre </body> dentro de
index.html.
Después de eso,
puedes copiar y pegar este trozo de códigopara hacer que el factor <header> se extienda a lo largo de toda la pantalla:
Entonces,
lo único que queda es establecer una imagen de fondo. Puedes hacer esto así en
main.css:
Si pones una imagen de tamaño suficiente en la ubicación detallada por la ruta anterior,
obtendrás un resultado similar a éste:
Para que la imagen de fondo sea más muy elegante,
también añadiremos una sobreimpresión. Para ello, crea otro elemento
divdentro del que terminas de incluir.
Entonces, puedes añadir lo siguiente en tu archivo CSS personalizado:
Esto creará esta bonita sobreimpresión para la imagen que has introducido anteriormente:
Ahora, probablemente desees
añadir un título en forma de encabezado más algún texto del cuerpo, a fin de que tus visitantes sepan de manera inmediata en qué lugar se encuentran se hallan y qué pueden esperar de él.
Para crearlos, simplemente añade este fragmento dentro del contenedor que has configurado en el último paso, debajo de la sobreimpresión:
Después de eso, agrega la siguiente marcación a
main.css:
Cuando lo hagas,
la página de destino se verá así:
Está empezando a funcionar, ¿no?
Ninguna página de aterrizaje o bien
landing pageestá completa sin
una llamada a la acción, la mayoría de las veces en forma de un botón. Por esa razón, sería un error no incluir cómo crear un botón de esta clase en este tutorial de Bootstrap.
Bootstrap ofrece muchas herramientas para crear botones de forma rápida y sencilla. Puedes encontrar muchos ejemplos.
En este caso, añade la próxima marca justo bajo el contenido de la página dentro del contenedor:
Además de eso, añade este CSS a
main.css:
Después de guardar y recargar, se verá así:
Ya estarás bastante satisfecho con la evolución de la página. Sin embargo,
aún no hemos terminado.
A continuación,
vamos a crear tres columnas debajo del contenido principalpara obtener información auxiliar.
Esta es una especialidad de Bootstrap, en tanto que juega con su fortaleza: crear una reja.
Así se hace en este caso:
Lo primero que notarás es el factor
row
o fila, que
es necesario cuando se crean columnas para que actúen como un contenedor para la cuadrícula.
En cuanto a las columnas, todas tienen varias clases:
col-lg-4,
col-md-4y
col-sm-12, señalando que se trata de
columnso columnas y el tamaño que tendrán en las diferentes pantallas.
Para comprender esto, precisas saber que, en una cuadrícula de Bootstrap, t
odas las columnas de una fila siempre y en todo momento suman el número 12.
Por lo tanto, darles las clases anteriores quiere decir que
ocuparán un tercio de la pantalla en pantallas grandes y medianas (12 dividido por tres es cuatro), pero la pantalla completa en dispositivos pequeños (doce de doce columnas). Tiene sentido, ¿no?
También notarás que hemos incluido imágenes y añadido la clase
.image-fluida las mismas. Esto es
para que respondan de manera que puedan escalar así como la pantalla en la que se ve la página.
Además de eso, tienes el siguiente estilo incluido en el sitio habitual:
Cuando
se agrega debajo del contenido principal y se guarda, se ve así:
Habrás observado que uno de los nuevos campos prosigue vacío. Esto es porque
queremos añadirle un formulario de contacto.
Esta es una
práctica muy normal en las páginas de destino para dejar que los visitantes se pongan en contacto.
Crear un formulario de contacto en Bootstrap es muy fácil:
En este momento, ya no debería tener que explicar la marcación para crear columnas. Esto es lo que significa el resto:
Hay mucho más que puedes hacer con los formularios, puedes encontrarlo en la documentación.
Sin embargo, para fines demostrativos, lo anterior es suficiente. Colócalo en la columna que queda vacía y luego añade este estilo en
main.css:
Cuando lo hayas hecho,
obtendrás un formulario como este:
Estamos llegando al final del tutorial de Bootstrap.
Lo último que tienes que añadir a tu página es una sección de pie de página con dos columnas.
A estas alturas, esto ya no debería ser un gran problema para ti:
Además del marcado frecuente de la cuadrícula, esta sección destaca
algunas posibilidades para modificar la tipografía con Bootstrap:
Además de lo precedente, puedes usar un estilo como el siguiente:
Esto resulta en
un hermoso pie de página que se ve así:
La página ya está lista y es de manera plena adaptativa. No obstante,
en la vista móvil del navegador, la sección superior aún no salide bien.
No te preocupes,
puedes corregir esto fácilmente con una simple consulta de medios o
media queries.
A menos que estés utilizando SASS para recopilar tu lugar Bootstrap, esto funciona de exactamente la misma manera que en otros casos,
sólo hay que tener en consideración los puntos de ruptura preestablecidos incluidos en el Bootstrap.
Como consecuencia, p
ara corregir el seo tienda online , puedes sencillamente incluir un fragmento de código como este:
Después de eso, todo es como debe ser:
Si has seguido el proceso, ahora
deberías tener configurada una página muy afín a la que se muestra a continuación.
Se ve excelente, ¿no? Además,
también funciona en móviles y es totalmente adapatativo.
No está mal para unas pocas líneas de código, ¿verdad?
Con esto,
tienes todo cuanto necesitas para crear una
landing pagecon Bootstrap.
Bootstrap es un
frameworko marco de trabajo de cara al desarrollo de código abierto y
front-endque cualquiera puede emplear de forma gratuita.
Te deja crear rápidamente prototipos de diseño, crear páginas web y, normalmente, empezar a trabajar.
Como has visto en este tutorial de Bootstrap para principiantes,
sólo necesitas conocimientos básicos de HTML, CSS y ciertos jQuery opcionales. Si bien no es tan cómodo como utilizar Wordpress, Bootstrap prosigue siendo una opción alternativa válida para crear un sitio web.
A estas alturas, ya sabes cómo
instalar y configurar Bootstrap y sus componentes, crear una página de aterrizaje fácil que incluye algo de contenido básico y darle estilo.
Ahora puedes crear
menús de navegación, establecer imágenes de fondo, incluir botones, columnas y formularios de contacto. Evidentemente, hay mucho más que aprender.
Gracias a este tutorial básico de Bootstrap,
ya sabes lo bastante como para continuar adelante por ti mismo. Si deseas ahondar en este marco de trabajo, un buen punto de partida es W3Schools.
Esperamos que te haya agradado este tutorial para principiantes y
nos gustaría saber cómo pones en práctica tus conocimientos.
¿Tienes preguntas, comentarios, solicitudes?Háznoslo saber en la sección de comentarios a continuación.
0 
Star