Modulo 1 - Fullstack
Modulo 1 - Fullstack
1
Índice
Sprint 1 4
Introduccion Full stack 4
¿Qué es una aplicación web? 5
¿Qué es FrontEnd ? 5
¿Qué es BackEnd? 6
HTML5 6
¿Qué es HTML? 6
¿Qué se necesita para trabajar con HTML? 6
Creando nuestro primer archivo .HTML 6
Historia de la evolución de HTML a HTML5 7
¿Qué es HTML5? 7
Etiquetas HTML5 8
Estructura de una página web HTML5 8
Estructura de la cabecera de un sitio web 9
Estructura del cuerpo de un sitio web 11
Etiqueta audio y video 12
Etiqueta audio 12
Etiqueta video 13
Etiqueta de medios <iframe> 14
Etiqueta div 15
Etiqueta formulario 15
CSS3 18
¿Qué es CSS? 18
Historia y evolución de CSS 18
Sintaxis 20
Propiedades de forma 24
Unidades de CSS 26
Propiedades de color 28
Propiedades de ubicación 30
Propiedades de texto 39
Otros recursos 42
Propiedades de lista 43
Propiedades de enlace o link 46
Box model 48
¿Què es Box Model? 48
Contenido 48
Padding 50
Border 52
Página 2 de 107
Margin 54
Outline 55
Flexbox 56
Conceptos 56
Los dos ejes de flexbox 57
El eje principal 57
El eje secundario 58
Líneas de inicio y de fin 59
El contenedor flex 60
Cambiar flex-direction 61
Contenedores flex Multi-línea con flex-wrap 62
La abreviatura flex-flow 63
Propiedades aplicadas a los ítems flex 64
La propiedad flex-basis 64
La propiedad flex-grow 65
La propiedad flex-shrink 65
Valores abreviados para las propiedades flex 65
Alineación, justificación y distribución del espacio libre entre ítems 67
Align-items 67
justify-content 67
Responsive 68
¿Que es el diseño web responsive? 68
¿En qué consiste el diseño responsive? 68
Etiqueta Meta Viewport 69
Estableciendo el Viewport 69
Tamaño del contenido para el Viewport 70
Grid-view 71
Media Query 72
Agregar un punto de interrupción o breakpoint 73
Siempre diseñar siguiendo el concepto de Mobile First 74
Breakpoint típicos 74
Frameworks (bootstrap 4, foundation, material) 74
¿Qué es un framework web y qué ventajas aportan? 74
¿Qué es un framework web? 75
Bootstrap 4 76
Introducción a Bootstrap 76
Sistema de grilla y estructura 85
Header y navegación 92
Flexbox en bootstrap 97
Página 3 de 107
Cards (Tarjetas) 101
Práctica Bootstrap 4 103
Glosario 103
Bibliografía 105
Sprint 1
Dicho de otra forma... El desarrollador Full Stack es un profesional todoterreno. Una pieza
fundamental en los departamentos de desarrollo de cualquier empresa. Conoce cómo se
diseña la aplicación web basándose en principios del diseño UX/UI y además, sabe
programarla.
Frontend es la parte de un sitio web que interactúa con los usuarios, por eso decimos que
está del lado del cliente. Backend es la parte que se conecta con la base de datos y el
servidor que utiliza dicho sitio web, por eso decimos que el backend corre del lado del
servidor. Estos dos conceptos explican, a grandes rasgos, cómo funciona una página web y
son fundamentales para cualquier persona que trabaje en el mundo digital, ya sea en
programación, marketing, diseño o emprendimiento.
Página 4 de 107
¿Qué es una aplicación web?
Las aplicaciones web son herramientas a las que se accede a través de cualquier
navegador (Google chrome, Firefox, Edge, etc) sin necesidad de contar con un programa
instalado previamente. Sin duda cuentan con grandes ventajas, como la independencia del
sistema operativo o la facilidad para actualizarlo. Sin olvidar la capacidad para almacenar la
información de forma permanente en servidores web.
¿Qué es FrontEnd ?
HTML, CSS y JavaScript son los lenguajes principales del Frontend, de los que se
desprenden una cantidad de frameworks y librerías que expanden sus capacidades para
crear cualquier tipo de interfaces de usuarios. React, Redux, Angular, Bootstrap,
Foundation, LESS, Sass, Stylus y PostCSS son algunos de ellos.
Página 5 de 107
¿Qué es BackEnd?
Algunos de los lenguajes de programación de Backend son Python, PHP, Ruby, C# y Java,
y así como en Frontend, cada uno de los anteriores tiene diferentes frameworks que te
permiten trabajar mejor según el proyecto que estás desarrollando.
HTML5
¿Qué es HTML?
Para trabajar con HTML solo se necesita un editor de texto plano. Existen muchos
programas de este tipo por ejemplo: bloc de notas, sublime text, aptana, brackets editor,
visual code, atom, etc.
Página 6 de 107
2. presionar el botón “guardar como” y nombrar el archivo index.html (siempre los
navegadores van a buscar por defecto el nombre index.html como nuestra página
principal).
3. Abrimos el archivo creado, en el navegador que tengan instalado por ejemplo google
chrome.
¿Qué es HTML5?
Página 7 de 107
permite a los sitios Web y a las aplicaciones ser más diversas y de gran alcance.
Etiquetas HTML5
● Una etiqueta son palabras claves que encerramos con los signos < y >, dentro de
estos signos escribimos el nombre de la etiqueta: <etiqueta>
● La mayoría de las etiquetas se deben escribir en par, es decir, una etiqueta de
apertura y otra de cierre: <etiqueta> </etiqueta>
● Si necesitan buscar información sobre el uso de una etiqueta pueden hacerlo con el
nombre de tag HTML.
Página 8 de 107
● <html> </html> es una etiqueta par, es la que va a encerrar todo el documento
html.
● <head> </head> esta etiqueta par, define la cabecera del documento y contiene
información del mismo, por ejemplo metadatos, scripts, estilos, ubicación de estilos,
título de la página entre otros datos. Todo lo que esté dentro de estas etiquetas no
es visible para el usuario.
● <body> </body> Es una etiqueta par y es conocida como el cuerpo del sitio web,
todo lo que se escriba dentro de esta etiqueta será visible por los navegadores.
Todos los sitios web, deben ser guardados como un proyecto por eso creamos las
siguientes carpetas estándar que tiene un proyecto web.
A partir del proyecto anterior, veremos que componentes van dentro de la etiqueta <head>
</head>.
<meta> Esta es una etiqueta simple, su función es añadir información de la página, los
buscadores como google, consultan información de la etiqueta <meta> buscando
coincidencias con lo que el usuario pretende encontrar. También se usa para agregar que
tipo de idioma estamos trabajando en el lenguaje de marcado, para establecer esto las
etiquetas poseen atributos.
Página 9 de 107
● <meta charset="utf-8"> Establece que nuestro sitio utiliza caracteres en español
esto es “utf-8”
● <meta name="author" content="Tutorial html Rollingcode"> Establece el
autor del sitio.
● <meta name="description" content="Agregar una descripción del sitio">
Establece la descripción que es utilizada posteriormente por los buscadores como
google.
● <meta name="keywords" content="tutorial, html, desarrollo web">
Establece una serie de palabras claves, que también son necesarias para mejorar los
resultados en las búsquedas de google.
● <title> Estructura de la cabecera</title> Indica el título que aparece en la
pestaña del navegador al ingresar a la web.
● <link rel="icon" href="img/icono.png"> establece el icono o favicon que tendrá
nuestra web, el atributo href=”...” indica donde está ubicado ese icono.
Página 10 de 107
Más información: Pueden encontrar mayor información acerca de las etiquetas html en las
siguientes páginas:
1. https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos#Metada
tos_del_documento
2. https://www.w3schools.com/html/default.asp
Página 11 de 107
● <b></b> resaltar el texto que está contenido dentro
● <br> salto de línea
● <hr> Crea una línea
● <a href=””> </a> Sirve para crear un vínculo, siempre lleva el atributo href para
indicar a dónde se dirige ese vínculo.
● <img> Esta etiqueta simple permite mostrar imágenes, hay que agregar el atributo
src con la ubicación de la imagen.
● <ol> </ol> Etiqueta para crear un conjunto de listas ordenada
● <li> </li> Son los ítems de la lista
● <ul> </ul> Etiqueta para crear una lista que no esté numerada.
● <table> </table> Etiqueta para crear tablas.
● <tr> </tr> Crea una fila
● <th> </th> Para crear columnas
● <footer> </footer> Etiqueta para crear el pie de página
Etiqueta audio
autoplay: esto reproducirá nuestro audio sin que apretemos el botón play.
Página 12 de 107
controls: mostrará los controles de reproducción.
loop: reproducirá nuestro audio constantemente.
Los formatos de audio más comunes que podemos usar, son los siguientes:
Etiqueta video
Extensiones admitidas:
● .ogv
● .mp4
● .webm
Página 13 de 107
Nota: Ver código en repositorio html/05-EstructuraVideo
ver mas información aqui:
https://developer.mozilla.org/es/docs/Web/HTML/Usando_audio_y_video_con_HTML5
La etiqueta <iframe> nos permite Insertar o incrustar, documentos html, un video en línea,
mapas, un reproductor de sonido en línea u otros elementos.
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3560.1061027457
31!2d-65.20935448518014!3d-26.836577383160417!2m3!1f0!2f0!3f0!3m2!1i1024!2
i768!4f13.1!3m3!1m2!1s0x94225c0e8d0271b7%3A0x7946062ac490db30!2sGral.+Paz+
576%2C+T4000+San+Miguel+de+Tucum%C3%A1n%2C+Tucum%C3%A1n!5e0!3m2!1ses-419!2
sar!4v1553006723151"
width="600" height="450" frameborder="0" style="border:0"
allowfullscreen></iframe>
Como vemos en los ejemplos anteriores, podemos incrustar con <iframe> videos, mapas,
páginas web dentro de nuestra web.
Página 14 de 107
Nota: Ver código en repositorio html/06-EtiquetaIframe
Etiqueta div
ejemplo:
<h1>Tim Berners-Lee</h1>
<div style="color: #040; font-style: italic">
<p>Timothy "Tim" John Berners-Lee es un científico de la
computación británico, conocido por ser el padre de la Web.
Estableció la primera comunicación entre un cliente y un servidor
usando el protocolo HTTP en noviembre de 1989.</p>
<p>En octubre de 1994 fundó el Consorcio de la World Wide Web
(W3C) con sede en el MIT, para supervisar y estandarizar el
desarrollo de las tecnologías sobre las que se fundamenta la Web y
que permiten el funcionamiento de Internet.</p>
</div>
Etiqueta formulario
En HTML5 podemos crear formularios para que las personas puedan interactuar con la
página.
<input> Etiqueta de entrada de datos, uno de sus atributos es type que es el tipo de
entrada que voy a utilizar, existen muchos tipos de entrada:
● Text
● Button
Página 15 de 107
● checkbox
● color
● date
● datetime
● email
● file
otro atributo muy utilizado es placeholder, sirve como una guía para mostrarle al usuario
que puedo poner en ese campo.
Todo lo que escribo en el campo <input> será almacenado en un atributo llamado value,
también puede establecer un valor por defecto que tendrá el atributo value.
Veamos el siguiente ejemplo de formulario para ver el uso de las distintas etiquetas y
atributos de formulario:
Página 16 de 107
Página 17 de 107
Si visualizamos este ejemplo en el navegador, veremos el siguiente formulario:
CSS3
¿Qué es CSS?
Página 18 de 107
CSS se ha creado en varios niveles y perfiles. Cada nivel se construye sobre el anterior,
generalmente añadiendo nuevas funciones.
Los perfiles son, parte de uno o varios niveles de CSS definidos para un dispositivo
particular. Actualmente, pueden usarse perfiles para dispositivos móviles.
CSS1
La primera especificación oficial de CSS, recomendada por la W3C fue CSS1, publicada en
diciembre 1996, y abandonada en abril de 2008.
CSS2
La especificación CSS2 fue desarrollada por la W3C y publicada como recomendación en
mayo de 1998, y abandonada en abril de 2008.
CSS3
A diferencia de CSS2, que fue una gran especificación que definía varias funcionalidades,
CSS3 está dividida en varios documentos separados, llamados “módulos”.
Cada módulo añade nuevas funcionalidades a las definidas en CSS2, de manera que se
preservan las anteriores para mantener la compatibilidad.
Página 19 de 107
Los trabajos en el CSS3, comenzaron a la vez que se publicó la recomendación oficial de
CSS2, y los primeros borradores de CSS3 fueron liberados en junio de 1999.
Sintaxis
Propiedad: Se escribe dentro de llaves, puede ser una propiedad de objeto, forma, texto o
de color. Siempre finalizó con punto y coma (;)
Para este ejemplo, creamos una página web y dentro de la etiqueta <head> </head>
agregamos la etiqueta <style></style>, con esto indicamos que lo que está dentro de esa
etiqueta serán los estilos que usará nuestra página, esta es una forma de agregar css a
nuestro sitio, pero no es la que utilizaremos usualmente.
Si visualizamos en el navegador este ejemplo, veremos lo siguiente:
Página 20 de 107
Si queremos llamar un estilo a través del id, crearemos el <div> con el id que queramos,
luego en la sección de estilos llamaremos al id comenzando con el símbolo numeral (#)
delante del id, de la siguiente manera #id { … }
Ejemplo:
Página 21 de 107
También podemos aplicar un estilo css a un grupo de cajas <div>, para ello podemos
hacer uso del atributo clase del <div class=”...”>.
Para tener en cuenta, los nombres de los atributos son palabras libres, pero se
recomienda que no comience con signos o caracteres especiales y que tampoco
comiencen con números.
Entonces, creamos varias cajas con el mismo atributo class, luego en nuestra hoja de estilo
podemos hacer referencia a esa clase comenzando con el carácter punto (.) seguido del
nombre de la clase: .nombreclase {... }
Ejemplo:
Página 22 de 107
Si visualizamos el ejemplo en un navegador, veremos lo siguiente:
Página 23 de 107
Nota: Ver código en repositorio CSS/01-sintaxisCSS
Propiedades de forma
Las propiedades de forma son las que nos van a permitir dar el tamaño, espacio y color a
las cajas <div> que estemos maquetando en el HTML.
Página 24 de 107
● margin: margen externo
● border: color y tipo de borde, esta propiedad tiene tres parámetros, ancho de borde,
tipo de borde, color. Por ejemplo: border: 5px solid blue;
● padding: margen interno
Página 25 de 107
Nota: Ver código en repositorio CSS/02-propiedadesDeForma
Unidades de CSS
● Unidades Absolutas
● Unidades Relativas
Unidades absolutas
Como su nombre lo indica, son unidades que están completamente definidas. Esto quiere
decir que su valor no depende de otro valor de referencia. En este grupo encontramos los
siguientes elementos:
Página 26 de 107
● in: Aumenta el tamaño de nuestro texto o elemento en pulgadas (1in = 96px =
2.54cm)
● px: Aumenta el tamaño de nuestro texto en pixeles (Dependiendo del dispositivo,
este elemento se clasifica también en Unidades Relativas). Esta unidad es la más
utilizada.
● pt: Aumenta el tamaño de nuestro texto en puntos (1pt = 1/72 de 1in)
● pc: Aumenta el tamaño de nuestro texto en picas (1pc = 12 puntos aprox)
Unidades relativas
Este tipo de unidad es más flexible y se expresa en forma de porcentaje (%). Me refiero a su
flexibilidad porque se adapta de acuerdo al tamaño de otro valor de referencia. Por ejemplo,
en el mundo real tu hermano y tú tienen dos balones de fútbol. Un balón es grande y el otro
es pequeño, pero a cada uno le corresponde la mitad de cada uno de esos balones (50%).
No importa el tamaño del balón, porque igual siempre vas a ser dueño del 50%. Entonces,
si el balón grande redujera su tamaño, igual tendrías el 50% de este.
Ahora aplicamos este ejemplo a los distintos tipos de resolución de pantalla. Entonces,
consideramos que las unidades relativas se subdividen en 2 grupos:
● Relativas a la tipografía
● Relativas al viewport
Relativas a la tipografía
● em: Relativo al tamaño de fuente de un elemento. Si, por ejemplo, utilizamos 3em
(font-size: 3em); mi texto aumentará 3 veces su tamaño en relación al tamaño que
se esté utilizando por defecto.
● ex: Aumenta el tamaño de mi letra en cuanto a su altura.
● Rem: Es igual a (em) con la diferencia de que este actúa en la raíz. O sea, en la
letra que esté utilizando por defecto.
Relativas al viewport
Las unidades relativas al viewport son muy importantes y se deben tomar en cuenta cuando
realizamos una web para varios tipos de resolución de pantalla. Combinando esta serie de
Página 27 de 107
medidas con otros elementos que podemos agregar a nuestra sintaxis conseguiremos
realizar un excelente trabajo.
Para ver el ejemplo de pixeles, hacemos clic en el siguiente botón y nos llevará a una web
que tiene a la derecha un editor de texto con el ejemplo y a la derecha podemos visualizar
como queda el código utilizado.
Propiedades de color
Página 28 de 107
1. Una forma es colocar la propiedad por ejemplo background y establecer el color,
usando el nombre del color en inglés. Por ejemplo: background: red;
2. Otra forma de establecer color, es usar los colores Hexadecimales, estos son
códigos de seis dígitos y siempre comienza con un símbolo numeral (#) delante de
los números. Por ejemplo: background: #ff0000; Podemos encontrar en internet
muchas paginas para ver la paleta de colores en hexadecimal, una de ellas es la
siguiente: https://htmlcolorcodes.com/es/
3. La tercera forma es utilizar la sintaxis RGBA, en este caso se utilizan cuatro pares
de número separados por coma, el primer par representa rojo, verde, azul, el último
par es el grado de transparencia que tendrá el color. También pueden buscar en
internet páginas que ofrecen paleta de colores en RGBA. Por ejemplo: background:
rgba(255,0,255,1);
Ejemplo:
Página 29 de 107
Nota: Ver código en repositorio CSS/03-propiedadesDeColor
Propiedades de ubicación
Página 30 de 107
Podríamos decir de esta imagen, que tenemos el encabezado con unas divisiones internas
que podrían ser el logo y los iconos de redes sociales. Luego tenemos otra división que
sería la barra de navegación con cinco botones. Luego viene una sección “top o superior”
donde podrían ir anuncios o titulares y contiene tres divisiones internas. Luego tenemos la
sección principal, que también está dividido en tres partes, podríamos considerar la división
central como el articulo principal. Por último tenemos la última división que sería nuestro
footer o pie de página.
Cuando maquetamos un sitio web es muy importante conocer las propiedades de ubicación
de css.
Página 31 de 107
2. Luego realizaremos el maquetado con css para ubicar las divisiones creadas
anteriormente.
Página 32 de 107
siguiendo el ejemplo del maquetado de la imagen anterior comenzamos a construir nuestro
código css para imitar ese maquetado, veremos el siguiente código que representa las cajas
principales del sitio y luego el maquetado final.
Página 33 de 107
3. Ahora continuamos agregando las cajas internas dentro de las cajas principales.
<style>
* {
margin: 0px;
padding: 0px;
list-style: none;
}
header {
position: relative;
margin: 20px auto;
width: 1000px;
height: 120px;
background: #444;
}
#logo {
position: absolute;
Página 34 de 107
top: 30px;
left: 30px;
width: 200px;
height: 60px;
background: #ccc;
}
.redes {
position: absolute;
width: 42px;
height: 42px;
background: #ffffff;
border-radius: 100%;
}
#icono1 {
top: 42px;
right: 120px;
}
#icono2 {
top: 42px;
right: 69px;
}
#icono3 {
top: 42px;
right: 19px;
}
nav {
position: relative;
margin: auto;
width: 1000px;
height: 48px;
background: #aaa;
}
Página 35 de 107
.botones {
float: left;
width: 196px;
height: 48px;
background: #333;
margin: 0px 2px;
}
#top {
position: relative;
margin: 20px auto;
width: 1000px;
height: 192px;
/* background: #888;*/
}
#top ul {
width: 1010px;
height: 192px;
/*background: rgba(255, 0, 0, .5);*/
}
/*En este caso seguimos la ruta hasta la caja que queremos modificar*/
#top ul li {
float: left;
width: 326px;
height: 192px;
background: black;
margin-right: 10px;
}
section {
position: relative;
margin: auto;
width: 1000px;
height: 453px;
background: #aaa;
}
Página 36 de 107
/*En este caso llamamos a la parte izquierda de la caja aside, si
ponemos el nombre
aside #izq estamos haciendo referencia a la ruta de otra caja
si usamos aside#izq nos estamos refiriendo a la misma caja*/
aside#izq {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 453px;
background: #333;
}
article {
position: absolute;
left: 200px;
top: 0;
width: 600px;
height: 453px;
background: #666;
}
aside#der {
position: absolute;
right: 0;
top: 0;
width: 200px;
height: 453px;
background: #333;
}
footer {
position: relative;
margin: 20px auto;
width: 1000px;
height: 70px;
background: #888;
Página 37 de 107
}
</style>
Cuando estamos maquetando podemos maquetar los valores que vienen por defecto en las
hojas de estilo, para eso utilizamos el asterisco (*) este símbolo es denominado selector
universal. Ejemplo de uso: * { margin: …. }
Página 38 de 107
Propiedad position o posición
● static
● relative, esta posición es normalmente la más usada.
● fixed
● absolute
● sticky
Propiedades de texto
Una forma para cambiar la fuente o font de nuestro sitio es agregando al css la siguiente
propiedad: font-family: nombreDeFuente;
Si no queremos utilizar las tipografías tradicionales, también podemos hacer uso de otras
descargadas del sitio de fuentes de google https://fonts.google.com/
Página 39 de 107
¿Cómo implementamos en nuestro sitio las tipografías de google font?
Página 40 de 107
Página 41 de 107
Recomendación: No se recomienda tener muchas tipografías en un sitio web, las
tipografías especiales están más recomendadas para logos, botones o títulos, pero para
párrafos es necesario usar tipografías legibles como la sans-serif, arial, etc.
Otros recursos
Cuando necesitamos agregar texto para ir probando nuestro sitio web, podemos hacer uso
del texto que genera la siguiente pagina web: https://es.lipsum.com/ esta pagina nos sirve
para poder crear párrafos, listas etc. con texto de prueba.
Página 42 de 107
Símbolos especiales
Existen símbolos especiales que en algunas ocasiones vamos a querer agregar en nuestro
sitio web y para ello tendremos que utilizar el código HTML que representa a ese símbolo,
por ejemplo para el símbolo de copyright © deberemos agregar en nuestra página el texto
© y cuando lo visualizamos en un navegador veremos el signo de copyright.
Podemos consultar una tabla completa de símbolos y el respectivo código html de cada uno
en la siguiente pagina: https://ascii.cl/es/codigos-html.htm
Propiedades de lista
Podemos modificar la posición de los marcadores de una lista de items con la propiedad
list-style-position, esta propiedad tiene dos valores posibles: inside y outside.
Página 43 de 107
Cambiar los marcadores de una lista de items
Podemos especificar que tipo de marcadores queremos usar en una lista, para esto usamos
la propiedad list-style-type
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
Página 44 de 107
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
También podemos agregar una imagen personalizada, en lugar de los marcadores por
defecto, para eso utilizamos list-style-image
<!DOCTYPE html>
<html>
<head>
Página 45 de 107
<style>
ul {
list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Podemos cambiar el estilo de los link, con propiedades que vimos anteriormente como
color, background, font-family, pero también podemos modificar su estilo dependiendo del
estado que tenga el link.
Página 46 de 107
● a:link - estado normal de un link que no fue utilizado.
● a:visited - estado de un link que ya fue utilizado.
● a:hover - estado cuando el usuario pasa el mouse sobre el link.
● a:active - estado en el momento que el usuario hace clic en el link.
Ejemplo de uso:
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
https://www.w3schools.com/css/default.asp
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>
Página 47 de 107
Box model
El Box Model es aprender la forma en el que navegador organiza los elementos dentro de la
pantalla. En muchas ocasiones el programador front-end confunde el rol que juega HTML y
CSS para representar la información.
La única sección opcional es outline, la cual solo se utiliza para elementos de los
formularios, por lo pronto, nos centraremos en las primeras 4 sesiones compartidas por
todos los elementos y más adelante retomaremos este último.
Contenido
Página 48 de 107
Esta sección se ajusta a la altura y ancho del “contenido” a mostrar, porque entre mayor
sean los elementos mostrados, más grande será esta área. Esta sección en muchas
ocasiones tiene un color o imagen de fondo para hacerla más atractiva.
Página 49 de 107
En la imagen podemos apreciar marcado en rojo, una etiqueta <p>, esta etiqueta tiene como
contenido el texto “¿No eres Oscar? Cambia de usuario”, la etiqueta <p> rodea todo el
texto, incluso, es más grande que el contenido, pues este lo rodea.
Padding
El padding es una separación que existe entre el contenido y el borde, el cual se utiliza para
dar una apariencia estética más atractiva y que el contenido no esté pegado al borde.
Página 50 de 107
El padding sigue siendo parte de la caja visible, por lo que, si tenemos una imagen o color
de fondo, este se extenderá a través del padding o relleno. El padding está delimitado por el
borde.
En esta nueva imagen, podemos ver el mismo ejemplo, solo que esta vez nos hemos
centrado en el <div> que contiene todo el contenido del formulario. Observemos que todos
los componentes que tenemos en la pantalla están alineados a la caja punteada interna,
esto es porque esto es “contenido” y la separación que existe entre las dos cajas punteadas
Página 51 de 107
es conocido como padding o relleno. Observemos que el color de fondo (gris claro) se
expande a través del contenido y el padding.
El padding puede ser establecido con las propiedades padding o con las propiedades más
específicas ( padding-top , padding-bottom , padding-left , padding-right ).
Border
El borde es una línea que podemos dibujar al final de la caja, esta se utiliza para darle una
apariencia estética a la caja, pues nos permite dibujar una línea de algún color, la línea
puede tener los siguientes estilos:
Página 52 de 107
La siguiente imagen muestra un ejemplo del border:
Página 53 de 107
En la imagen podemos apreciar un borde muy suave, apenas perceptible, pero que sin duda
le da una terminación más elegante, estamos utilizando la propiedad border-radius para
darle un efecto redondeado en las esquinas.
Margin
El margen es la última sección de Box Model y se puede ver como una separación invisible
que ayuda a separar un elemento de otro. Cuando definimos un color o imagen de fondo,
este no se propaga a esta sección.
Página 54 de 107
En este caso, utilizamos un margin inferior (margin-bottom) para separar el primer campo
del segundo, esta separación hace que las dos cajas no choquen y se vean más estéticas.
Outline
El outline es una decoración gráfica que hace que los elementos que ganan el foco, que son
por lo general los <input> , se coloreen como con una ligera aura que los rodea:
Página 55 de 107
El outline se establece mediante la propiedad outline y es posible establecer el grueso del
outline, el color y el estilo.
Flexbox
Flexbox es un sistema de elementos flexibles que llega con la idea de olvidar estos
mecanismos y acostumbrarnos a una mecánica más potente, limpia y personalizable, en la
que los elementos HTML se adaptan y colocan automáticamente y es más fácil personalizar
los diseños. Está especialmente diseñado para crear, mediante CSS, estructuras de una
sóla dimensión.
Conceptos
Para empezar a utilizar flexbox lo primero que debemos hacer es conocer algunos de los
elementos básicos de este nuevo esquema, que son los siguientes:
Página 56 de 107
○ Eje principal: Los contenedores flexibles tendrán una orientación principal
específica. Por defecto en horizontal (fila).
○ Eje secundario: De la misma forma, los contenedores flexibles tendrán una
orientación secundaria, perpendicular a la principal. Si la principal es en
horizontal, la secundaria será en vertical, y viceversa.
● Ítem: Cada uno de los hijos flexibles que tendrá el contenedor en su interior.
Cuando trabajamos con flexbox necesitamos pensar en términos de dos ejes — el eje
principal y el eje secundario. El eje principal está definido por la propiedad
flex-direction, y el eje secundario es perpendicular a este. Todo lo que hacemos con
flexbox está referido a estos dos ejes, por lo que vale la pena entender cómo trabajan desde
el principio.
El eje principal
El eje principal está definido por flex-direction, que posee cuatro posibles valores:
● row
● row-reverse
● column
● column-reverse
Página 57 de 107
El eje secundario
El eje secundario va perpendicular al eje principal, y por lo tanto si flex-direction (del eje
principal) es row o row-reverse el eje secundario irá por las columnas.
Página 58 de 107
Entender cuál eje es cuál es importante cuando empezamos a mirar la alineación y
justificación flexible de los ítems; flexbox posee propiedades que permiten alinear y justificar
el contenido sobre un eje o el otro.
Puede leer más acerca de la relación que hay entre flexbox y la especificación de los
“Modos de Escritura”, sin embargo la siguiente descripción debería ayudar para explicar por
qué no se habla de izquierda y derecha ni de arriba o abajo a la hora de describir la
dirección en la que fluyen los ítems flex.
Si flex-direction es row y estoy trabajando en español, entonces el margen inicial del eje
principal quedará a la izquierda, y el margen final a la derecha.
Página 59 de 107
En ambos casos el margen inicial del eje secundario estará en el extremo superior del
contenedor flex y el margen final en el extremo inferior, ya que ambos idiomas tiene un
modo de escritura horizontal.
El contenedor flex
Un área del documento que contiene un flexbox es llamada contenedor flex. Para crear un
contenedor flex, establecemos la propiedad del área del contenedor display como flex o
inline-flex. Tan pronto como hacemos esto, los hijos directos de este contenedor se
vuelven ítems flex. Como con todas las propiedades de CSS, se definen algunos valores
iniciales, por lo que cuando creemos un contenedor flex todos los ítems flex contenidos se
comportan de la siguiente manera.
● Los ítems se despliegan sobre una fila (la propiedad flex-direction por defecto es
row).
● Los ítems empiezan desde el margen inicial sobre el eje principal.
● Los ítems no se ajustan en la dimensión principal, pero se pueden contraer.
● Los ítems se ajustarán para llenar el tamaño del eje cruzado.
● La propiedad flex-basis es definida como auto.
● La propiedad flex-wrap es definida como nowrap.
El resultado es que todos los ítems se alinearán en una solo fila, usando el tamaño del
contenedor como su tamaño en el eje principal. Si hay más ítems de los que caben en el
contenedor, estos no pasarán más abajo si no que sobrepasan el margen. Si hay ítems más
altos que otros, todos los ítems serán ajustados en el eje secundario para alcanzar al
mayor.
Por ejemplo:
Página 60 de 107
Cambiar flex-direction
Ejemplo:
Página 61 de 107
Contenedores flex Multi-línea con flex-wrap
Si bien flexbox es un modelo unidimensional, es posible lograr que nuestros ítems flex sean
repartidos en varias líneas. Haciendo esto, se deberá considerar cada línea como un nuevo
contenedor flex. Cualquier distribución del espacio solo sucederá dentro de esa línea, sin
referenciar las líneas colaterales.
Para lograr repartirse en varias líneas añada la propiedad flex-wrap con el valor wrap.
Cuando los ítems sean demasiados para desplegarlos en una línea, serán repartidos en la
línea siguiente.
El siguiente ejemplo contiene ítems que se les ha asignado un ancho, donde el ancho total
de los ítems excede al del contenedor flex. Cuando flex-wrap se coloca como wrap, los
ítems se repartirán. Al colocarlo como nowrap, el cual es el valor inicial, estos se contraerán
para calzar con el contenedor ya que usan los valores iniciales de flexbox que permiten que
los ítems se contraigan. Al usar nowrap los ítems podrían salirse del margen si estos no
pudieran contraerse, o no contraerse lo suficiente para ser calzados.
Página 62 de 107
La abreviatura flex-flow
ejemplo:
Página 63 de 107
Propiedades aplicadas a los ítems flex
Para obtener más control sobre los ítems flex podemos apuntarlos directamente. Hacemos
esto a través de tres propiedades:
● flex-grow
● flex-shrink
● flex-basis
Si tenemos tres ítems con un ancho de 100 pixeles en un contenedor de 500 pixeles de
ancho, entonces el espacio que se necesita para colocar nuestros ítems es de 300 pixeles.
Esto deja 200 pixeles de espacio disponible. Si no cambiamos los valores iniciales entonces
flexbox colocará ese espacio después del último ítem.
Si en cambio quisiéramos que los ítems crecieran para llenar ese espacio, entonces
necesitaremos un método para distribuir el espacio sobrante entre los ítems. Es justo lo que
harán las propiedades flex que aplicaremos a dichos ítems.
La propiedad flex-basis
Con flex-basis se define el tamaño de un ítem en términos del espacio que deja como
espacio disponible. El valor inicial de esta propiedad es auto — en este caso el navegador
revisa si los ítems definen un tamaño. En el ejemplo de arriba, todos los ítems tienen un
ancho de 100 pixeles así que este es usado como flex-basis.
Página 64 de 107
Si los ítems no tiene un tamaño entonces el tamaño de su contenido es usado como
flex-basis. Y por eso, apenas declarado display: flex en el padre a fin de crear ítems
flex, todos estos ítems se ubican en una sola fila y tomaron sólo el espacio necesario para
desplegar su contenido.
La propiedad flex-grow
Con la propiedad flex-grow definida como un entero positivo, los ítems flex pueden crecer
en el eje principal a partir de flex-basis. Esto hará que el ítem se ajuste y tome todo el
espacio disponible del eje, o una proporción del espacio disponible si otro ítem también
puede crecer.
Si le damos a todos los ítems del ejemplo anterior un valor flex-grow de 1 entonces el
espacio disponible en el contenedor flex será compartido igualitariamente entre estos ítems
y se ajustarán para llenar el contenedor sobre el eje principal.
La propiedad flex-shrink
Así como la propiedad flex-grow se encarga de añadir espacio sobre el eje principal, la
propiedad flex-shrink controla cómo se contrae. Si no contamos con suficiente espacio
en el contenedor para colocar los ítems y flex-shrink posee un valor entero positivo, el
ítem puede contraerse a partir de flex-basis. Así como podemos asignar diferentes
valores de flex-grow con el fin que un ítem se expanda más rápido que otros — un ítem
con un valor más alto de flex-shrink se contraerá más rápido que sus hermanos que
poseen valores menores.
El tamaño mínimo del ítem tendrá que ser considerado cuando se determine un valor de
contracción que pueda funcionar, esto significa que flex-shrink tiene el potencial de
comportarse menos consistentemente que flex-grow .
Página 65 de 107
Difícilmente veremos la propiedades flex-grow, flex-shrink y flex-basis usadas
individualmente; si no que han sido combinadas en la abreviación flex . La abreviación flex
permite establecer los tres valores en este orden: flex-grow, flex-shrink, flex-basis.
Veamos el ejemplo siguiente, recuerde que el primer valor es flex-grow. Dándole un valor
positivo significa que el ítem puede crecer. El segundo es flex-shrink — con un valor positivo
los ítems pueden contraerse. El valor final es flex-basis; este es el valor que los ítems usan
como valor base para crecer y contraerse.
Hay además algunas abreviaturas de valores que cubren la mayoría de los casos de uso.
Se ven con frecuencia utilizados en tutoriales, y en muchos casos es todo lo que
necesitamos usar. Los valores predefinidos son los siguientes:
● flex: initial
● flex: auto
● flex: none
● flex: <positive-number>
Página 66 de 107
Fijando flex: initial el ítem se restablece con los valores iniciales de Flexbox. Es lo
mismo que flex: 0 1 auto. En este caso el valor de flex-grow es 0, así que los ítems no
crecerán más de su tamaño flex-basis . El valor flex-shrink es 1, así que los ítems
pueden contraerse si es necesario en vez de salirse de los márgenes. El valor de
flex-basis es auto. Los ítems pueden definir un tamaño en la dimensión del eje principal,
o bien obtener su tamaño por el contenido del los mismos.
Usar flex: auto es lo mismo que usar flex: 1 1 auto , es como con flex:initial
pero en este caso los ítems pueden crecer y llenar el contendor así como encoger si se
requiere.
Al usar flex: none se crearán ítems flex totalmente inflexibles. Es como escribir flex: 0
0 auto. Los ítems no pueden ni crecer ni encoger pero serán colocados usando flexbox con
flex-basis en auto.
Una abreviación que es común en tutoriales es flex: 1 o flex: 2 y más. Es como usar
flex: 1 1 0. Los ítems pueden crecer o encoger con un flex-basis de 0.
Una característica clave de flexbox es la capacidad de alinear y justificar ítems sobre los
ejes principal y secundario, y distribuir el espacio entre los ítems flex.
Align-items
El valor inicial para esta propiedad es stretch razón por la cual los ítems se ajustan por
defecto a la altura de aquel más alto. En efecto se ajustan para llenar el contenedor flex —
el ítem más alto define la altura de este.
En cambio definimos align-items como flex-start para que los ítems se alineen al
comienzo del contenedor flex, flex-end para alinearlos al final, o center para alinearlos al
centro.
justify-content
La propiedad justify-content es usada para alinear los ítems en el eje principal, cuyo
flex-direction define la dirección del flujo. El valor inicial es flex-start que alineará los
Página 67 de 107
ítems al inicio del margen del contenedor, pero también se podría definir como flex-end
para alinearlos al final, o center para alinearlos al centro.
También podemos usar space-between para tomar todo el espacio sobrante después de
que los ítems hayan sido colocados, y distribuir de forma pareja los ítems para que haya un
espacio equitativo entre cada ítem. O bien, usamos el valor space-around para crear un
espacio equitativo a la derecha e izquierda de cada ítem.
Responsive
El diseño web responsive o adaptativo es una técnica de diseño web que busca la correcta
visualización de una misma página en distintos dispositivos. Desde ordenadores de
escritorio a tablets y móviles.
Hoy en día accedemos a sitios web desde todo tipo de dispositivos; ordenador, tablet,
smartphone… por lo que, cada vez más, nos surge la necesidad de que nuestra web se
adapte a los diferentes tamaños de los mismos.
Página 68 de 107
Se basa en proporcionar a todos los usuarios de una web los mismos contenidos y una
experiencia de usuario lo más similar posible, frente a otras aproximaciones al desarrollo
web móvil como la creación de apps, el cambio de dominio o webs servidas dinámicamente
en función del dispositivo.
El viewport es la zona visible por el usuario de una página web. Varía con el dispositivo, y
será más pequeño en un teléfono móvil que en una pantalla de ordenador.
Antes de las tabletas y los teléfonos móviles, las páginas web fueron diseñadas sólo para
las pantallas del ordenador, y era común que las web tengan un diseño estático y un
tamaño fijo.
Entonces, cuando comenzamos a navegar por internet usando las tabletas y los teléfonos
móviles, las páginas web de tamaño fijo eran demasiado grandes. Para solucionar este
problema, los navegadores de los dispositivos reducen la escala de toda la página web para
ajustarse a la pantalla.
Estableciendo el Viewport
HTML5 introdujo un método para que los diseñadores web tengan control sobre el área de
visualización, a través de la etiqueta <meta>.
Página 69 de 107
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
Este es un ejemplo de una página web sin la etiqueta meta de visualización, y la misma
página web con la etiqueta meta de visualización:
A continuación veremos algunos consejos para tener en cuenta cuando diseñamos un sitio
web:
● Los usuarios utilizan el scroll para desplazarse verticalmente por los sitios web tanto
en dispositivos de escritorio y móviles - pero no horizontalmente.
Página 70 de 107
Por lo tanto, si el usuario se ve obligado a desplazarse horizontalmente, o alejar la imagen,
para ver toda la página web, esto sería en una experiencia de usuario pobre.
2. No deje que el contenido se base en un viewport particular, para rendir bien - Las
dimensiones de la pantalla y el ancho en píxeles CSS varían ampliamente entre los
dispositivos, el contenido no debe depender de un ancho particular.
Grid-view
Muchas páginas web están basados en un sistema de cuadrículas, lo que significa que la
página se divide en columnas:
El uso de grid-view es muy útil en el diseño de páginas web. Esto hace que sea más fácil
colocar los elementos en la página.
Página 71 de 107
Una grid-view responsive tiene 12 columnas y un ancho total de 100%, esta se encoge y
expande a medida que cambia el tamaño de la ventana del navegador.
Media Query
Media Query es una técnica introducida en CSS3, utiliza la regla @media para incluir un
bloque de propiedades CSS sólo si una determinada condición es verdadera.
Por ejemplo:
Si la ventana del navegador es 600px o más pequeño, el color de fondo será azul claro.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: lightgreen;
}
Página 72 de 107
<body>
<p>Resize the browser window. When the width of this document is 600
pixels or less, the background-color is "lightblue", otherwise it is
"lightgreen".</p>
</body>
</html>
Podemos añadir un punto de interrupción en ciertas partes del diseño para establecer cómo
se comportará este diseño en cada lado del punto de ruptura.
Página 73 de 107
Siempre diseñar siguiendo el concepto de Mobile First
Mobile First significa diseñar primero para móviles antes de diseñar para el escritorio o
cualquier otro dispositivo (Esto hará que la visualización de la página sea más rápida en los
dispositivos más pequeños).
Breakpoint típicos
Existen muchas pantallas y dispositivos con diferentes altos y anchos, por lo que es difícil
de crear un punto de interrupción exacto para cada dispositivo. Para simplificar esta tarea,
podemos orientarnos con los siguientes breakpoints sugeridos:
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
Página 74 de 107
A la hora de empezar un nuevo proyecto de diseño web, siempre hay que realizar varias
tareas de organización y estructuración. Las tecnologías web que se van a usar, el estilo de
los diferentes elementos de la web, metodologías, tiempos de entrega, tipografías y
colores… éstas son sólo algunas de las cosas que organizar en el equipo de trabajo, para
realizarlas contamos con varias herramientas como son los frameworks web, los cuales nos
facilitarán muchas de estas tareas y nos ayudarán a desarrollar un proyecto web de calidad.
Vamos a ver qué es un framework web y algunas de las ventajas que nos aportan según
nuestras necesidades.
Los frameworks web son un conjunto de herramientas, estilos y librerías dispuestas a través
de una estructura o esqueleto base, para el desarrollo de aplicaciones web más escalables
y sencillas de mantener.
Gracias a estos frameworks web, podemos ahorrar grandes cantidades de tiempo y costes,
pero vamos a profundizar más en las ventajas que tienen, causantes de su gran éxito y
expansión.
1 – Documentación y comunidad.
La cantidad de documentación que podremos encontrar sobre un framework, suele ser
enorme y además con una gran comunidad detrás, respondiendo preguntas y desarrollando
nuevas funcionalidades.
3 – Arquitectura y metodología.
La mayoría de frameworks del mercado usan arquitecturas y metodologías actuales, como
el Modelo-Vista-Controlador (MVC).
4 – Plantillas web.
Las plantillas facilitan mucho el trabajo de los desarrolladores web y los frameworks no se
quedan atrás en esto. Algunos frameworks Frontend como Bootstrap cuentan con grandes
cantidades de plantillas y componentes desarrollados por su extensa comunidad.
Página 75 de 107
5 – Seguridad web.
Los frameworks suelen contar con medidas de seguridad para proteger nuestros datos y los
de nuestros clientes, ayudando en gran medida en uno de los temas que lleva de cabeza a
grandes empresas de servicios web.
Framework front-end
Cada uno de estos frameworks funciona de una forma bastante similar, en este curso
utilizaremos el framework bootstrap ya que es el más utilizado en el mercado actual.
Bootstrap 4
Introducción a Bootstrap
Historia
Página 76 de 107
framework que habían desarrollado anteriormente (bootstrap) para que todo el equipo siga
una guia e intenten minimizar las inconsistencias. Esta iniciativa triunfo en Twitter, llevando
a que el equipo completo trabajara más rápido, de forma más eficaz y con menos
inconsistencias.
Aunque comenzó como una solución interna en Twitter, pronto se dieron cuenta del
potencial de la herramienta y en Agosto de 2011, el framework “Bootstrap” fue lanzado al
público como proyecto Open Source en Github. En los meses posteriores, miles de
desarrolladores de todo el mundo contribuyeron al proyecto y Bootstrap se convirtió en el
proyecto Open Source más activo del mundo, convirtiéndose en “el framework de
presentación más popular para desarrollar proyectos responsive y para móviles”.
¿Qué es bootstrap?
Se puede incluir en distintos proyectos sin importar el lenguaje con el que se decida realizar
el backend. por ejemplo se puede utilizar en proyectos con .net de microsoft, angular o
react.
Sirve para desarrollar aplicaciones responsivas y mobile-first mucho más fácil, rápida y
estandarizada.
Es una estrategia en la cual el código se diseña primero para dispositivos pequeños como
los móviles y luego para dispositivos más grandes.
Página 77 de 107
Integrando Bootstrap a un proyecto
2. Otra opción es usar el BootstrapCDN, donde solo deben incluir al proyecto las
referencias los siguientes archivos css y js. Esta instalación la veremos en un
ejemplo.
Solo CSS
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/boot
strap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhc
Wr7x9JvoRxT2MZw1T" crossorigin="anonymous">
Página 78 de 107
3. Otra alternativa para integrar bootstrap es descargando los archivos fuentes,
compilarlos y agregar las librerías a nuestro proyecto.
1- En Visual Studio Code, creamos una página index.html y establecemos las etiquetas
correspondientes:
<!DOCTYPE html>
<html lang="es">
<head>
<h1>Título</h1>
</head>
<body>
<p>texto de prueba</p>
</body>
</html>
</html>
Página 79 de 107
3- para instalar bootstrap, vamos a utilizar el segundo método mencionado anteriormente,
es decir, dentro de la etiqueta <header> agregaremos la referencia de estilo, y dentro de la
etiqueta <body> el resto de las referencias. El archivo quedaría de la siguiente manera.
<!DOCTYPE html>
<html lang="es">
<head>
<h1>Título</h1>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2M
Zw1T" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6
jizo" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js
"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHND
z0W1" crossorigin="anonymous"></script>
Página 80 de 107
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B0
7jRM" crossorigin="anonymous"></script>
<p>texto de prueba</p>
</body>
</html>
</html>
4- Al guardar los cambios, podemos verificar que bootstrap está funcionando correctamente,
si cambio la tipografía por la que bootstrap usa por defecto. Entonces en chrome veremos la
siguiente imagen:
Conceptos importantes
-
Viewport
Página 81 de 107
En versiones anteriores de bootstrap lo que hacíamos era diseñar en base a un navegador
o aún tamaño promedio de una computadora e ir adaptando ese sitio a dispositivos móviles.
meta
< name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
por ejemplo:
Página 82 de 107
El primer caso, muestra como se ve la página de Marvel en dispositivos móviles y podemos
apreciar que es correctamente responsive.
El segundo caso es la página de turismo de salta, podemos observar que esta página se
hace mucho más chica para que podamos ver su contenido.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
Página 83 de 107
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS
6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
Contenido de Boostrap 4
Layout: se refiere a componentes y opciones para dar estructura a tu proyecto. Incluye por
ejemplo un sistema de cuadrículas o grid system entre otros.
Content: incluye elementos de tipografía como headers o títulos, elementos para incluir
código y también tiene contenido para imágenes, figuras y tablas.
Components: son diversos elementos que incluyen CSS y JS. Entre los componentes
podemos encontrar por ejemplo alertas, botones, carrusel, dropdown, modals, etc.
Utilities: estos son elementos que nos permitirán manejar de manera más rápida y fácil
aspectos sencillos pero que se utilizan frecuentemente. Por ejemplo visibility que sirve para
mostrar u ocultar elementos. otras utilidades son los bordes, los colors, flex para usar
flexbox, position y text.
Página 84 de 107
Podemos encontrar más información sobre estos elementos en la página oficial de
bootstrap.
Dependiendo del proyecto que se vaya a realizar, podemos considerar que no es necesario
importar todo el contenido de bootstrap, si solo necesitamos incluir algunas cosas, podemos
guiarnos de la tabla que se muestra en la imagen anterior donde ser ve que archivo css y js
debemos importar en nuestro proyecto para algunos o todos los elementos mencionados
anteriormente, layout, content, components y utilities.
Se puede verificar en la página web oficial de bootstrap cuales son los dispositivos y
navegadores compatibles. Cuandos nos dan las especificaciones de un proyecto tenemos
que pensar cuales son los dispositivos que usarán nuestra aplicacion o pagina web, para
ellos podemos verificar en la siguiente tabla que dispositivos aceptan el uso de bootstrap 4.
Página 85 de 107
Sistema de grilla y estructura
Podemos decir que layout es la estructura o distribución de elementos que tendrá nuestro
proyecto.
Containers o contenedores
<div class="container">
<!-- Content here -->
</div>
Página 86 de 107
Podemos variar de muchas formas la clase container, por ejemplo si queremos un container
que ocupe el 100% del viewport, podemos agregar la clase “container-fluid” y obtendremos
el siguiente aspecto.
<div class="container-fluid">
...
</div>
Responsive breakpoints
Dependiendo del tamaño del viewport es que cambiará el tamaño del container, lo que nos
indica a partir de qué tamaño de viewport cambiará el container son las @media queries.
Página 87 de 107
Estos breakpoints ya están definidos en bootstrap y solo los utilizaremos en nuestra hoja de
estilo css cuando necesitemos que nuestro proyecto cambie algo dependiendo de un
tamaño en particular de viewport.
Práctica de Containers
Crear un proyecto con dos contenedores, uno con la clase “container” y otro con la clase
“container-fluid” y probar con las herramientas disponibles para desarrolladores del
navegador chrome cómo se comporta en los distintos dispositivos.
● Border Color
Página 88 de 107
● Border-radius
● Color
Página 89 de 107
● Background-color
Página 90 de 107
Bootstrap 4 está basado en Flexbox, como dijimos anteriormente, Flexbox es un tipo de
layout establecido en css3 como lo fue el block layout, inline layout o table layout en
versiones anteriores.
Básicamente flexbox se refiere a estilos que proveen una forma más eficiente de
estructurar, alinear y distribuir el espacio entre elementos aun cuando el tamaño de los
elementos es dinámico.
Bootstrap 4 tiene integrado un sistema de grilla que nos ayudará acomodar los elementos
en la página, estableciendo un orden y que sea fácil de estructurar, pero además este
sistema nos ayudará a que el sitio web sea responsive y podamos cambiar el tamaño y la
ubicación de los elementos dependiendo del viewport que estemos usando para visualizar
la web.
Ejemplo.
1. Debemos tener en cuenta que siempre para usar esta estructura debemos comenzar
con el <div class=”container”> dentro de este puede hacer muchas filas (row) y
dentro de este varias columnas.
Página 91 de 107
2. La cantidad máxima de columnas que se pueden agregar por fila es 12.
Las clases de bootstrap 4 están creadas para los breakpoints vistos anteriormente, para
saber qué clase usar podemos guiarnos con la siguiente tabla.
Página 92 de 107
Header y navegación
Agregando un header
Todos los sitios web llevan un elemento html <header> podemos agregar distintas clases de
bootstrap a la etiqueta header, dentro del <header> tendremos un <div> con la clase
main-menu como se muestra a continuación:
dentro de la etiqueta body:
Agregando un Navbar
El menú de navegación o navbar de bootstrap 4, tiene muchas opciones, ahora veremos
algunas características:
1. Para asegurara una mejor experiencia se recomienda que el navbar este contenido
dentro de un elemento html <nav>
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
Ejemplo
Página 93 de 107
https://getbootstrap.com/docs/4.0/components/navbar/
Se puede crear páginas personalizadas, podemos utilizar bootstrap como base y agregar
nuestros propios estilos.
Ejemplo:
/*
*************************************
Página 94 de 107
| HEADER
*************************************
*/
.header-area .main-menu,
.header-area .main-menu,
.dropdown-menu {
background: var(--orange-coral);
box-shadow: 0 3px 16 0 rgba(0, 0, 0, .1);
}
Página 95 de 107
Podemos observar en este ejemplo los estilos usados y como se sobreescriben,
regularmente lo que tendremos serán estilos por defecto que maneja el navegador, los
estilos del framework en este caso bootstrap 4 y finalmente nuestros estilos personalizados
en este caso nuestro custom.css.
Diseño responsivo
Continuando con el ejemplo anterior, si queremos que los items del menú de navegación
están centrados sólo en los tamaños xs y sm, pero queremos que en los tamaños
posteriores esté alineado a la derecha, entonces puedo agregar una clase ya definida por
bootstrap 4.
También puedes utilizar las @media querie para sobreescribir comportamientos, por
ejemplo agregaremos un archivo responsive.css y agregar la referencia al index, para ver
cómo se comporta.
Página 96 de 107
contenido de archivo responsive.css
Página 97 de 107
En este ejemplo en un dispositivo de 829 x 705 px, de acuerdo a las clases agregadas
podemos observar que los elementos del menú quedan alineados a la derecha y con un
tamaño de fuente más grande. En un dispositivo más pequeño se ve como la siguiente
imagen.
Flexbox en bootstrap
Para utilizar flexbox en bootstrap 4, tenemos que agregar un <div> clase .d-flex
Página 98 de 107
Por supuesto que existen muchas variaciones de flex, por ejemplo puedo usar flex para los
distintos viewport antes vistos.
Dirección
También podemos dar dirección a los elementos usando por ejemplo, .flex-row como el
siguiente ejemplo:
Página 99 de 107
De la misma manera también podemos ordenar los elementos en columna en su versión
normal y en reversa, como se ve a continuación:
Justificar contenido
También podemos justificar el contenido, esto se puede hacer con una propiedad de css
justify-content, pero en bootstrap 4 lo podemos hacer agregando a la etiqueta <div> la
clase justify-content y además podemos indicar con las clases de bootstrap a donde
queremos que estén alineados los elementos.
Podemos alinear los ítems o childs dentro de un display, esta clase se refiere a la alineación
vertical que tendrán los hijos. por ejemplo
Esta clase align-items-start, alinea los ítems partiendo desde la principio del partent
verticalmente hablando.
En este caso la clase align-items-end, alinea los ítems partiendo desde el final del partent
verticalmente hablando.
Align self
Hasta ahora las clases vistas, se aplican a los parents, pero modifican el comportamiento
que tendrán los ítems childs.
También podemos modificar el comportamiento de los ítems child's, por ejemplo con la
clase
onde establecemos la alineación vertical que tendrá cada ítem o elemento
align-self d
hijo.
Las tarjetas o componentes cards de bootstrap 4, son elementos que permiten agrupar
diversos tipos de información o elementos en su interior, es básicamente un contenedor que
permite agregar varios elementos como headers, footer, imágenes, botones entre otros.
Este componente está basado en flexbox por lo que sus elementos son fáciles de acomodar
como vimos.
Este componente no tiene asociado un margen o width por defecto, por lo que estos
atributos serán los mismos que el parent o el que definamos nosotros.
Por ejemplo:
En bootstrap 4 existen muchas clases para trabajar con las cards nombraremos las mas
usadas:
Glosario
Término Descripción
A
Es un proceso para resolver un problema. Por lo general es ordenado y
Algoritmo secuencial
B
Bootstrap es una biblioteca multiplataforma o conjunto de herramientas de
Bootstrap
código abierto para diseño de sitios y aplicaciones web
C
Un comentario es un bloque de código que no se ejecuta por el intérprete o el
Comentario compilador.
Un compilador es un programa informático que traduce un programa escrito en
un lenguaje de programación a otro lenguaje de programación, generando un
Compilador
programa equivalente que la máquina será capaz de interpretar. Usualmente el
segundo lenguaje es lenguaje de máquina, pero también puede ser un código
E
Es una especificación de lenguaje de programación publicada por ECMA
International. ECMAScript define un lenguaje de tipos dinámicos ligeramente
inspirado en Java y otros lenguajes del estilo de C. Soporta algunas
características de la programación orientada a objetos mediante objetos
ECMAScript basados en prototipos y pseudoclases.
Un editor de texto es un programa informático que permite crear y modificar
Editor de texto archivos digitales compuestos únicamente por textos sin formato, conocidos
comúnmente como archivos de texto o “texto plano”.
Se refiere a estilos que proveen una forma más eficiente de estructurar, alinear
Flexbox y distribuir el espacio entre elementos aun cuando el tamaño de los elementos
es dinámico.
G
Bibliografía
Información de html5 -
https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos
Box Model -
https://developer.mozilla.org/es/docs/Learn/CSS/Introduction_to_CSS/Modelo_cajas