Contexto
En esta sección exploramos las opciones que tenemos para posicionar objetos, los distintos tipos de pantallas y resoluciones que usan diferentes dispositivos, ver la diferencia entre tipos layouts, cómo utilizar grids para diseño y finalmente cómo usar Bootstrap como base de proyectos. Es un tema un tanto denso, por lo que se requiere tu total atención.
Explicación
Hasta ahora has visto que CSS trata a todos los objetos como si estuvieran dentro de su propia caja. Esta caja puede ser block o inline. Las cajas con características de block comienzan en una nueva línea y actúan como los principales bloques de construcción en cualquier diseño, mientras que las cajas inline fluyen entre el texto circundante.
Es posible controlar la cantidad de espacio de cada caja estableciendo el ancho (width) de las cajas, y a veces la altura también. Para separar a las cajas utilizamos borders, margins, padding y los colores de fondo. Observa:
Imagen obtenida de
http://netdna.webdesignerdepot.com/uploads/2012/08/boxmodel-block-vs-inline.png
Solo para fines educativos.
Si un elemento block se encuentra dentro de otro elemento block, a la caja exterior se le conoce como un elemento contenedor o padre. Es común agrupar una serie de elementos en conjunto dentro de un elemento <div>, u otro a nivel de bloque. Por ejemplo, si se agrupan todos los elementos que forman un <header> de un sitio, como puede ser el logotipo y la navegación principal, el elemento <div> que contiene este grupo de elementos es el elemento contenedor.
A continuación se muestran elementos para el control de posición:
Haz clic en cada elemento
Los elementos block aparecen en una nueva línea cada uno, empujando cada nuevo elemento hacia abajo. Incluso si especificamos el ancho de las cajas y existe espacio para que dos elementos aparezcan lado a lado, no se mostrarán de esta manera. Este es el comportamiento por defecto, a menos que le indiques al navegador hacer otra cosa.
Mueve al elemento de la posición que tendría en flujo normal, cambiando a la parte superior, derecha, inferior o izquierda de donde habría sido colocado. Esto no afecta a la posición de los elementos circundantes, ellos mantienen la posición que serían en un flujo normal.
Coloca al elemento en relación a su elemento contenedor. Se saca del flujo normal, lo que significa que no afecta a la posición de los elementos que lo rodean, ya que simplemente ignoran el espacio que habría ocupado. Los elementos con posición absoluta se mueven cuando los usuarios se desplazan hacia arriba y abajo de la página.
Esta es una forma de posicionamiento absoluto que coloca al elemento en relación con la ventana del navegador. Los elementos con posicionamiento fijo no afectan la ubicación de los elementos de los alrededores y no se mueven cuando el usuario se desplaza hacia arriba o hacia abajo en la página.
Flotar un elemento permite colocarlo fuera del flujo normal y ubicarlo a la derecha o izquierda de la caja que lo contiene. El elemento flotante se convierte en un elemento tipo block que facilita el flujo de otro contenido.
Ahora es momento de apliques estos posicionamientos, escribe los próximos ejemplos y ejecútalos para que veas el comportamiento de cada uno.
positon: relative;
Dado este HTML:
<body> <h1>La historia de un salmon y el oso cafe. </h1> <p>Hace mucho tiempo en un gran cañon, vivia un salmon rosado de grandes aletas y cola poderosa. Este salmon vivia con sus hermanos que solian burlarse de... </p> </body>
Y éste CSS:
p {
position: relative;
top: 10px;
left: 100px;
}
Podemos ver que el <p> es colocado 10 pixeles hacia arriba y 100 pixeles a la izquierda de su posición en el flujo normal. Para mover el cuadro de manera vertical, usamos las propiedades top y bottom, y para mover el cuadro de horizontal, usamos left o right. Los valores por lo general se dan en píxeles, porcentajes o ems.
position:absolute;
Ahora bien, para esta posición se tomará el mismo HTML:
<body> <h1>La historia de un salmon y el oso cafe.</h1> <p>Hace mucho tiempo en un gran cañon, vivia un salmon rosado de grandes aletas y cola poderosa. Este salmon vivia con sus hermanos que solian burlarse de...</p> </body>
Pero se agregará este CSS:
h1 {
position: absolute;
top: 0px;
left: 500px;
width: 250px;
}
p {width: 450px;}
Con la posición con valor de absoluto, la caja sale del flujo normal y ya no afecta a la posición de otros elementos de la página, actuando como si no estuviera ahí. En este ejemplo, el <h1> ha sido posicionado en la parte superior de la página y 500 píxeles a la izquierda. El ancho es de 250 píxeles de ancho. La propiedad width también se ha aplicado a los <p> para evitar que el texto se encime.
position: fixed;
En esta posición se toma el mismo HTML, pero se agrega el siguiente CSS.
h1 {
position: fixed;
top: 0px;
left: 50px;
padding: 10px;
margin: 0px;
width: 100%;
background-color: #efefef;
}
p {margin-top: 100px;}
Aquí se posiciona al elemento en relación con la ventana del navegador. Por lo tanto, cuando el usuario se desplaza por la página, se queda en el mismo lugar exacto. En este ejemplo, el <h1> se ha colocado en la esquina superior izquierda de la ventana del navegador. Cuando el usuario se desplaza por la página, los párrafos desaparecen detrás de los elemento <h1>.
z-index
Cuando se usan los comandos relative, fixed o absolute para posicionar objetos, las cajas que los contienen pueden apilarse. Si esto ocurre, los elementos que aparecen después en el código HTML se colocan en la parte de arriba de la pila de elementos. Esta propiedad controla la posición de los elementos en el eje z.
En otras palabras, controla el orden en que los elementos se apilan, permitiendo colocarlos uno sobre el otro en la posición en que los necesitas. El valor que acepta es un número, que mientras más grande sea, más se acerca a la parte de arriba del montón de elementos.
Considera el mismo HTML con el que has trabajado los anteriores ejemplos, pero ahora agrega este código CSS:
h1 {
position: fixed;
top: 0px;
left: 0px;
padding: 10px;
margin: 0px;
width: 100%;
background-color: #efefef;
z-index:10; /* prueba sin z-index para que veas la diferencia */
}
p {
position: relative;
top: 70px;
left: 70px;
}
¿Qué ocurre con este nuevo código?
Float
Esta propiedad coloca elementos en el extremo izquierdo o derecho, permitiendo que otros elementos fluyan a su lado. Cuando usamos float también debemos especificar la propiedad width del elemento que estamos flotando. Si no especificamos el ancho del elemento, lo más común es que tome el 100% del elemento, como si fuera normal flow
Para ejemplificar esta propiedad, aplica este código CSS al HTML con el que ya hemos trabajado anteriormente:
blockquote {
float: right;
width: 275px;
font-size: 130%;
font-style: italic;
font-family: Georgia, Times, serif;
margin: 0px 0px 10px 10px;
padding: 10px;
border-top: 1px solid #665544;
border-bottom: 1px solid #665544;
}
En este último ejemplo, el elemento <blockquote> se usa para colocar una cita. El elemento es flotado hacia la derecha y los párrafos que siguen a la cita fluyen alrededor de este elemento. En algunas ocasiones querrás posicionar elementos uno al lado del otro. Para lograr este tipo de layout tambien usamos float.
Considera que quieres colocar varios párrafos uno al lado del otro, como en este HTML:
<body> <h1>La historia de un salmon y el oso cafe.</h1> <blockquote>"La vida del salmon es corta, pero es la unica que tiene." - Un viejo sabio </blockquote> <p>Hace mucho tiempo en un gran cañon, vivia un salmon rosado de grandes aletas y cola poderosa. Este salmon vivia con sus hermanos que solian burlarse de...</p> <p>Hace mucho tiempo en un gran cañon, vivia un salmon rosado de grandes aletas y cola poderosa. Este salmon vivia con sus hermanos que solian burlarse de...</p> <p>Hace mucho tiempo en un gran cañon, vivia un salmon rosado de grandes aletas y cola poderosa. Este salmon vivia con sus hermanos que solian burlarse de...</p> <!-- prueba colocando mas texto en uno de los <p> para que veas lo que sucede --> </body>
Ahora aplica el siguiente código de CSS para ver lo que ocurre:
body {
width: 750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
}
p {
width: 230px;
float: left;
margin: 5px;
padding: 5px;
background-color: #efefef;
}
Puedes ver que se ordenan tal y como lo queremos. Debes tener cuidado con la altura de los elementos pues si no se especifica y uno de los párrafos contiene más texto que los otros, entonces la armonía del diseño se pierde. Esto se puede arreglar colocando la altura del elemento con más contenido.
Clear
Esta propiedad permite decir que ningún elemento, dentro del mismo que lo contiene, debe tocar los lados izquierdo o derecho del contenedor. Los valores que acepta son left, right, both y none. Considera este ejemplo con la siguiente base HTML:
<div class="one"> <h1>Este elemento no tiene aplicado clear.</h1> </div> <div class="one"> <h1>Este elemento no tiene aplicado clear.</h1> </div> <div class="one"> <h1>Este elemento no tiene aplicado clear.</h1> </div> <div class="two"> <h2>Este elemento si tiene aplicado clear.</h2> </div> <div class="one"> <h1>Este elemento no tiene aplicado clear.</h1> </div> <div class="one"> <h1>Este elemento no tiene aplicado clear.</h1> </div> <div class="one"> <h1>Este elemento no tiene aplicado clear.</h1> </div>
Usa también el siguiente código CSS:
.one {
float: left;
background-color: red;
border: 1px solid #333;
padding: 1em;
}
.two {
clear: both;
padding: 1em;
background-color: skyblue;
}
Puedes ver el ejemplo funcional aquí.
Diseño básico multicolumnas
Ahora verás la manera básica de cómo hacer un diseño de dos columnas con la ayuda de CSS. Para hacer un diseño de dos columnas similar al que se muestra en esta imagen:
Imagen obtenida de
http://codegrad.hub.ph/samples/fixedwidthlayout/step0.gif
Solo para fines educativos.
Debes hacer algo parecido a esto:
<div class="wrapper">
<header>My header!</header>
<div class="sidebar">My Sidebar!</div>
<div class="content">My Content!</div>
<footer>My footer!</footer>
</div>
Y el CSS:
*, *:before, *:after {
box-sizing: border-box;
} /* si leiste las lecturas relacionadas, ya sabes que es esto! */
.wrapper{
height:1000px;
min-width:100%;
background-color:#ccc;
}
header{
padding:1em;
background-color:pink;
margin:0;
height:100px;
}
.sidebar{
float:left;
width:30%;
padding:1em;
background-color:yellow;
height:100%;
}
.content{
float:left;
width:70%;
background-color:lightgreen;
padding:1em;
height:100%;
}
footer{
position:relative;
bottom:0;
clear:both;
padding:1em;
background-color:skyblue;
text-align:center;
}
¿Qué ocurre? Observa el ejemplo en este enlace.
Haz clic en el botón para acceder a la práctica.
13.2 Pantallas, resolución y layout
Existen muchos tipos de pantalla para la gran variedad de dispositivos con los que podemos acceder a las páginas de internet. Los visitantes a nuestros websites tendrán distintas pantallas que mostrarán diferentes cantidades de información, por lo que el diseño tiene que ser capaz de funcionar en la mayor cantidad de pantallas posibles.
La resolución de pantalla es otro factor a tomar en cuenta al momento de diseñar, este concepto se refiere al número de puntos que puede muestra una pantalla por pulgada. Algunos dispositivos tienen una resolución mayor que las computadoras de escritorio y la mayoría de los sistemas operativos permiten a los usuarios ajustar la resolución de sus pantallas. Es interesante que a mayor resolución, el texto aparece a un menor tamaño.
Debido a la gran variación de tamaños de pantalla y resoluciones, los diseñadores web crean los layouts de las páginas de alrededor de 960-1000 píxeles de ancho, ya que la mayoría de los usuarios serán capaces de ver los diseños de este ancho en sus pantallas. Este sitio muestra algunos datos interesantes acerca de este tema.
Enseguida se muestra más información respecto a los layouts fijos y líquidos, ambos sumamente útiles y con sus propias cualidades.
Fixed width layout
Los esquemas de ancho fijo, mejor conocidos como fixed,no cambian su dimensión cuando el usuario aumenta o disminuye el tamaño de la ventana de su navegador. Las medidas tienden a ser dadas en píxeles. Este tipo de layout tiene ventajas y desventajas:
Este tipo de diseño utiliza pixeles como valores en el ancho de sus principales estructuras.
Observa esta disposición HTML:
Imagen obtenida de
<body>
<div id="header">
<h1>Tu logo debe de estar aqui</h1>
<div id="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Productos</a></li>
<li><a href="">Servicios</a></li>
<li><a href="">Nosotros</a></li>
<li><a href="">Contacto</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="feature">
<p>Producto </p>
</div>
<div class="column1">
<p>Column One </p>
</div>
<div class="column2">
<p>Column Two </p>
</div>
<div class="column3">
<p>Column Three </p>
</div>
</div>
<div id="footer">
<p>© Copyright 2011
</div>
</body>
Ahora observa su respectivo CSS.
body {
width: 960px;
margin: 0 auto;
}
#header h1{
text-align: center;
padding: 40px;
}
#content {
overflow: auto;
height: 100%;
}
#nav, #feature, #footer {
text-align:center;
background-color: #efefef;
padding: 10px;
margin: 10px;
}
.column1, .column2, .column3 {
background-color: #efefef;
width: 300px;
float: left;
margin: 10px;
}
li {
display: inline;
padding: 5px;
}
Escribe el ejemplo y analiza los resultados. Si usas Firefox, ejecuta esta combinación CTRL + SHIFT + M para activar el modo de pantalla responsiva y experimenta con sus opciones.
¿Puedes ver el comportamiento de este layout al momento de verlo en una pantalla más pequeña?
Liquid layouts
Cuando se usan esquemas líquidos se tiene que definir el ancho en porcentajes. Ahora aplica el siguiente CSS líquido al mismo HTML con el que trabajaste anteriormente.
body {
width: 90%;
margin: 0 auto;
}
#header h1 {
text-align: center;
padding: 40px;
}
#content {
overflow: auto;
}
#nav, #feature, #footer {
margin: 1%;
text-align: center;
}
.column1, .column2, .column3 {
width: 31.3%;
float: left;
margin: 1%;
}
.column3 {
margin-right: 0%;
}
li {
display: inline;
padding: 0.5em;
}
#nav, #footer {
background-color: #efefef;
padding: 0.5em 0;
}
#feature, .article {
height: 10em;
margin-bottom: 1em;
background-color: #efefef;
}
Ahora prueba este nuevo diseño con el modo de pantalla responsiva de tu navegador y observa las diferencias. Puedes ver que este nuevo diseño se adapta a la perfección a la pantalla que le indiques.
Uso de cuadrículas (grids)
Es conocimiento popular entre los desarrolladores y diseñadores que una cuadrícula permite organizar mejor la información en un plano, ya que da referencia de espacios y escalas. De igual manera las cuadrículas ayudan a posicionar elementos en el espacio del sitio. Existen varios frameworks (estructuras) que ayudan con este tipo de diseños, pues ya tienen definidas reglas CSS para su aplicación. Uno de los más usados es 960 grid system.
La base de este diseño es dividir en el espacio de 960 pixeles 12 o 16 columnas de contenido, que están especificadas en el CSS del framework. Puedes descargarlo, ver su CSS y jugar un poco con él para que lo comprendas. No entraremos en detalle con este tipo de layout, pero es bueno que lo conozcas.
Uso de varios documentos CSS
Es posible usar varios documentos de estilos, ya sea porque quieres organizar los estilos a tu manera o simplemente porque quieres usar alguna librería externa que dará alguna funcionalidad especial. Hay dos métodos para ligar estos documentos, uno ya lo conoces, pues lo has estado utilizando en todos los ejercicios: <link rel="stylesheet" type="text/css" href="css/styles.css" /> y desde ahí puedes ligar a todos los documentos CSS que requieras.
Ahora bien, el otro consiste en tener un documento CSS principal, y desde ahí, llamar a los otros documentos CSS:
@import url("new_styles.css");
De la misma manera que usamos fuentes web externas importamos estilos CSS. Debes recordar que al usar @import esta tiene que aparecer antes que cualquier otra regla.
Haz clic en el botón para acceder a la práctica.
13.3 Bootstrap
Existen varios frameworks que nos regalan plantillas listas para ser modificadas, algunas son de licencia libre, otras requieren que se dejen los créditos del creador. Nosotros utilizaremos Bootstrap para continuar con nuestro objetivo de aprender a diseñar websites dinámicos y que además tengan las características adaptativas que son solicitadas actualmente.
Bootstrap tiene como objetivo principal facilitar el desarrollo web, es una interfaz para el usuario, también es un framework de aplicaciones web, es decir, un marco de software diseñado para apoyar el desarrollo de sitios web dinámicos y aplicaciones web. Bootstrap es compatible con las últimas versiones de la Google Chrome, Firefox, Internet Explorer, Opera y Safari, aunque algunos de estos navegadores no son compatibles con todas las plataformas.
Desde la versión 2.0 también es compatible con el diseño web responsivo. Esto significa que el diseño de las páginas web se ajusta dinámicamente, teniendo en cuenta las características del dispositivo utilizado, ya sea una computadora de escritorio, una tableta o un teléfono móvil. Además, desde la versión 3.0, Bootstrap adoptó una filosofía de primero el diseño móvil, haciendo hincapié en el diseño responsivo para dispositivos móviles. Puedes ver algunos ejemplos de lo que es posibe hacer con este framework aquí.
Pero, basta de presentaciones, dirígete a la página web de Boostrap y descarga la última versión.
Luego de elegir una opción se descargará un archivo .zip con los componentes básicos. Guárdalo en la ubicación que prefieras y descomprímelo para ver su contenido.
Es difícil que te conviertas en experto en Bootstrap en este curso, pero si podrás tener una idea amplia de los conceptos básicos que te permitirán aplicar técnicas más avanzadas conforme avances en tu preparación. Recuerda que algunos de los módulos más impactantes de Bootstrap requieren de JQuery, una librería de JavaScript, pero de eso se hablará más adelante.
Empieza por explorar los ejemplos de layout que tiene Bootstrap, obsérvalos, activa la pantalla responsiva de tu navegador o simplemente reajusta la pantalla para que veas cómo se reacomodan los elementos. Veamos la estructura de su layout:
<!DOCTYPE html>
<html lang="en">
...
</html>
Cada una de las clases tiene selectores especiales que se aplican a un tipo de objeto, un tipo de pantalla especial y un determinado número de columnas. Ahora revisa esta clase:
.col-med-12
Puedes ver cómo afectan las medidas de pantalla aquí.
Una vez que has explorado los diferentes ejemplos del sitio de Bootstrap, ahora aplícalos al siguiente ejercicio práctico.
¿Que te parece si lo aplicamos a uno de nuestros viejos ejercicios de PHP y MySQL? ¿Recuerdas el ejercicio donde desplegamos información de películas desde una base de datos? Apliquemos algo de estilo a esta pantalla.
<html>
<head>
<title>Catalogo de Peliculas</title>
</head>
<body>
<?php
require_once 'login.php';
$conn = new mysqli($hn, $un, $pw, $db);
if ($conn->connect_error){ //revisamos la conexion
die($conn->connect_error);
}
$_query = "SELECT * FROM db_peliculas";
$result = $conn->query($_query);
if (!$result){
die($conn->error);
}
$rows = $result->num_rows; //asignamos los renglones totales
for ($j = 0 ; $j < $rows ; ++$j) {
$result->data_seek($j);//buscamos la inforamcion del renglon seleccionado
$row = $result->fetch_array(MYSQLI_ASSOC);//
echo '<h1>' . $row['nombre'] . '</h1>';
echo 'Folio: ' . $row['id'] . '<br>';
echo 'Nombre pelicula: ' . $row['nombre'] . '<br>';
echo 'Tipo de pelicula: ' . $row['tipo_pelicula'] . '<br>';
echo 'Clasificacion: ' . $row['clasificacion'] . '<br>';
echo "_____________________<br><br>";
}
$result->close();
$conn->close();
?>
</body>
</html>
*La pantalla puede variar dependiente de la versión del bootstrap.
<?php
$rows = $result->num_rows; //asignamos los renglones totales
for ($j = 0 ; $j < $rows ; ++$j){
$result->data_seek($j);//buscamos la inforamcion del renglon seleccionando
$row = $result->fetch_array(MYSQLI_ASSOC);//
echo '<div class="col-md-4">';
echo '<h2>' . $row['nombre'] . '</h2>';
echo '<p>' .'Folio: ' . $row['id'] . '</p>';
echo 'Nombre pelicula: ' . $row['nombre'] . '</p>';
echo 'Tipo de pelicula: ' . $row['tipo_pelicula'] . '</p>';
echo 'Clasificacion: ' . $row['clasificacion'] . '</p>';
echo '</div>';
}
?>
Un gran cambio, ¿no lo crees?
Puedes consultar un ejemplo muy similar al anterior en esta liga.
Cierre
Asegúrate de leer la información que se te recomienda, en este curso no te convertirás en un experto en Bootstrap, pero se te han brindado las herramientas para que practiques y experimentes incesantemente. Esta es la única manera en la que podrás pulir tus habilidades.
En el próximo capítulo verás Javascript, el cual le dará funcionalidad a tu proyecto. No obstante, ya tienes que empezar a construir la base de tu proyecto. Desarrolla el layout con HTML y CSS de manera que sea responsivo. Si quieres aprovechar las bondades que te ofrece Bootstrap ¡adelante! Debes de tener listos los documentos de maquetación para poder presentarlos a tu facilitador y recibir retroalimentación de su parte.
Checkpoint
Asegúrate de poder:
Referencias
Niederst Robbins, J. (2012). Learning Web Design. A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics. USA: O'Reilly Media.