El diseño de la interfaz del usuario sobre un navegador
El objetivo de este artículo es iniciar un desarrollo elemental de una página HTML 5, agregarle contenido y generar una serie de elementos de estilo en CSS con la intención de mejorar la interfaz del usuario para su uso en dispositivos variados (diseño adaptable o responsive).
Trabajo práctico introductorio
Para realizar el TP sobre computadora, primero vamos a acceder al siguiente enlace:
Inicio » https://www.w3schools.com/
code/tryit.asp?filename= FVKWF0XZN0NT
En la ventana se visualiza una división vertical coronada por una cabecera.
Observar el código que aparece a la izquierda:
- Observar la declaración <!DOCTYPE html> que define que el documento del ejemplo es del tipo HTML5.
- Identificar las etiquetas <html> (apertura) y </html> (cierre) que aparecen en la segunda y en la última línea de código: estas etiquetas son contenedoras de todo lo que puede interpretar un navegador corriente, y definen el elemento raíz (root) de una página HTML.
- Identificar las etiquetas <head> y <head>: el contenido de head es invisible para el usuario, y abarca una serie de instrucciones y datos (metainformación) que se utilizan para modificar la representación de los datos que se muestran en la ventana del navegador y realizar algunas operaciones complementarias. Este primer ejemplo, se limitan a:
- El título en lenguaje natural de la página queda especificado por las etiquetas <title></title> y ev
entualmente será visible para el usuario final, pero no dentro de la ventana de representación de información del navegador. - La instrucción meta del viewport,
cuyo significado no nos interesa por ahora.
- El título en lenguaje natural de la página queda especificado por las etiquetas <title></title> y ev
- Identificar las etiquetas <body> y </body>, tal vez la más significativas para los productores de contenidos, porque en ellas se anida toda la información relevante (visible, audible, etc.) para los usuarios (y para los motores de búsqueda), y en la que más cuidado tienen que poner los diseñadores de la arquitectura de la información y los desarrolladores de interfaces.
Paso 1
El primer objetivo es reconocer algunos de los elementos básicos con los que se compone una página cualquiera en HTML5 y lenguajes relacionados, y cómo se expresan en la ventana de contenidos de un navegador.
Para ello, comenzamos por oprimir el botón verde [ Run »] para visualizar sobre el cuadro de la derecha la expresión del código de la izquierda.
Así se presenta una página HTML5 básica, sin ningún tipo de estilo.
Línea por línea, pueden reconocerse, a un lado y otro de la división, los contenidos de <body>:
- Las etiquetas de títulos o encabezados (<h1>, <h2>, <h3>, <h4>) cuya utilización de títulos debería seguir siempre un orden jerárquic, por el que sólo tendría que incluirse un único título de tipo h1, y a partir de allí descender de manera ordenada según la relevancia relativa de cada elemento que se titula; a veces, como en los índices y menús, los títulos no preceden a ningún texto sino que son autónomos.
- Los párrafos de texto (<p>) con el desarrollo de los títulos que los preceden, y dentro de ellos algunas formas de estilo como negritas (<strong>), cursivas (<em>), y enlaces (<a>) a otras páginas.
- Listas de elementos (<ul>), en el caso una lista sin orden (unordered list, diferente de las listas ordenadas, ordered lists, cuyos elementos van numerados o alfabetizados), y en su interior los items de la lista (<li>).
Cualquier página de contenidos debería poder leerse de modo ordenado y comprensible sin necesidad de agregarle ningún otro tipo de componente de estilo, dirección que transita lo que denominamos la Internet semántica.
Una vez logrado este objetivo, misión de quien genera los contenidos y de quien los codifica en HTML5, llega el momento de proporcional una interfaz más humana para mejorar la experiencia del usuario.
Paso 2
Para dar un estilo muy básico a la página vamos a insertar en la cabeza <head>, debajo de la línea <meta …> y antes del cierre de la etiqueta </head> el siguiente fragmento de código, y ejecutar [ Run »] :
<style>
/* El operador «*» asterisco es un comodín para indicar TODO */
* {
box-sizing: border-box; /* Ajusta el tamaño de todas las cajas */
margin: 0; /* Elimina los márgenes para todos los elementos */
padding: 0; /* Elimina los rellenos para todos los elementos */
}
/* La etiqueta html comprende a todo el documento (se emplea aquí por razones técnicas) */
html {
font-family: "Lucida Sans", sans-serif; /* Asigna una fuente sin serifas */
font-size: 62.5%; /* Fija el tamaño global de referencia en 10px */
/* Los navegadores lo establecen en 16px */
/* Al reducirlo al 62,5% de 16 quedan 10px, más fácil de manejar que 16 */
}
/* La etiqueta body comprende a los contenidos visibles del documento */
body {
/* Colores básicos de figura y fondo*/
color: #000; /* Se fija el color de figura en negro (0 rojo, 0 verde, 0 azul) */
background-color: #fff; /* Se fija el color de fondo en blanco */
font-size: 1.5rem; /* Fija el tamaño nominal en 15px = 10px x 1,5 */
/* Por defecto, los textos de los párrafos serán de un tamaño de 15px o 1.5rem */
margin: 1rem 1.5rem; /* Separa a los contenidos de los bordes de la ventana */
}
/* Las etiquetas h1… h(n) identifican a los títulos */
h1, h2, h3, h4, h5, h6 {
color: gray; /* Asigna color a los títulos */
padding: .5em 0 .25em 0; /* Asigna rellenos proporcionales para los tíutlos */
/* El orden es superior - derecha - inferior - izquierda */
/* Los valores son 50% del valor M de la tipografía, 0px, 25% y 0px */
}
/* Las etiquetas p identifican a los párrafos */
p {
color: #404040;
/* Asigna un color particular para los párrafos (75% de negro) */
padding-bottom: 0.6em;
/* Asigna relleno de 9px = 0,6 de 15px debajo de los párrafos */
}
/* Las etiquetas ul, ol, dl, identifican a las listas */
/* Listas sin orden: ul; listas ordenadas: ol; listas de definición: dl */
ul, ol, dl {
margin: 0.6rem 1.5rem;
/* Asigna márgenes a las listas */
/* Los valores son 6px arriba y abajo, 15px a la izquierda y a la derecha */
}
/* Las etiquetas a identifican enlaces o hipervínculos */
a {
color: #0033cc; /* Asigna color azul medio a los enlaces */
font-weight: bold; /* Aumenta el peso tipográfico (negrita) */
text-decoration: none; /* Elimina la decoración (subrayado) */
}
/* Las pseudoclases :hover, :active y :visited redefinen estados especiales de los vínculos */
/* Hover refiere a cuando el cursor está sobre el vínculo */
a:hover {
color: #000; /* El color de los vínculos cambia a negro */
}
/* Active funciona cuando se hace click sobre el enlace */
a:active {
border-bottom: 1px dotted; /* Agrega una linea punteada */
}
/* Visited indica que el enlace ya fue visitado antes */
a:visited {
color:#009; /* Cambia el color a azul oscuro */
}
</style>
En los comentarios (que aparecen en el navegador en el código en color verde encerrados entre /* y */) se describe el significado las instrucciones de estilo para cada etiqueta HTML5; los comentarios no son visibles ni alteran el código.
Es interesante notar las variaciones en las notaciones de cada elemento, para discutirlas durante la clase.
Paso 3
Esta instancia tomaremos decisiones elementales de arquitectura de la información, como asignar papeles particulares a las estructuras de información de la página.
Para eso cambiaremos el contenido del body original por uno al que se le han agregado etiquetas estructurales divisorias (en negrita) cortando y pegando el fragmento bajo estas líneas y a continuación [ Run »] (al ejecutarse no debería observarse ningún cambio, lo cual es consistente porque no se introdujo ninguna variación de estilo):
<div id="cabecera">
<h1>La Canea</h1>
</div>
<div id="articulo">
<article>
<h2>La ciudad</h2>
<p><strong>La Canea</strong> (o <em>Chania</em>) es una ciudad de la costa noroeste de la isla griega de <a href="https://www.lacreta.es" target="_blank">Creta</a>.</p>
<p>Es famosa por su <em>puerto veneciano del siglo XIV</em>, sus calles estrechas y sus restaurantes frente al mar.</p>
<p>En la entrada del puerto hay un faro del siglo XVI de influencia veneciana, egipcia y otomana.</p>
<p>En el <strong>Museo Náutico</strong>, ubicado justo enfrente, se exponen maquetas de barcos, objetos navales y fotografías.</p>
<p>El antiguo monasterio de <strong>San Francisco</strong> alberga al <strong>Museo Arqueológico de Chania</strong>.</p>
</article>
</div>
<div id="menu-principal">
<h3>Menú</h3>
<ul>
<li><a href="#">Cómo llegar</a></li>
<li><a href="#">La ciudad</a></li>
<li><a href="#">La isla</a></li>
<li><a href="#">La gastronomía</a></li>
</ul>
</div>
<div id="detalles">
<h4>¿Qué es?</h4>
<p>La Canea es una ciudad de la isla de Creta.</p>
<h4>¿Dónde está?</h4>
<p>Creta es una isla de Grecia sobre el Mar Mediterráneo.</p>
<h4>¿Cómo se llega?</h4>
<p>El aeropuerto de Chania tiene acceso desde cualquier país de Europa.</p>
<div>
En el pegado anterior introdujimos 4 secciones <div> que distribuyen el significado de los contenidos de manera coherente:
- La identificada como "cabecera", que abarca al título principal de la página «La Canea».
- La identificada como "articulo", que incluye al artículo que describe a «La Ciudad» y sus atracciones.
- La identificada como "menu-principal", que contiene un menú con una lista de vínculos para obtener más información.
- La identificada como "detalles", que agrega datos adicionales sobre La Canea.
La distribución en secciones, por ahora, sólo afecta a la estructura interna de la información (visible, por ejemplo, para los motores de búsqueda como Google o Bing) pero no la manera en que se muestran los datos, como puede comprobarse.
Los nombres dados a los identificadores (id) deben ser únicos (no pueden repetirse en la misma página), claros, consistentes y comprensibles para cualquiera que intente comprender el código, pero no cumplen ninguna otra función específica más allá de la identificación.
Hasta aquí, las alteraciones en la interfaz del usuario se han limitado al uso tipográfico en lo concerniente a fuentes, tamaños, espaciados y colores.
Como ejercicio adicional, es posible experimentar con algunos de estos atributos, observar y registrar lo que sucede. Como ejemplo, se sugieren los siguientes cambios, al tiempo que se insta a realizar combinaciones personales y ver lo que sucede en cada caso:
- En la etiqueta body cambiar/agregar los siguientes atributos:
- background-color: yellow; /* */
- font-size: 1.8rem; /* */
- margin: 0; /* */
- border: 8px solid white; /* */
- padding: 1rem 3rem; /* */
- En la etiqueta p cambiar/agregar los siguientes atributos:
- color: rgba(0,0,0,.333); /* Cambia el color a negro, pero le da una transparencia del 33,33% */
- font-weight: 100; /* Hace que el texto sin estilo tenga un peso más liviano (light) */;
- En la etiqueta ul cambiar/agregar los siguientes atributos:
- list-style-type: square; /* Cambia el estilo del marcador de cada item */
- margin: 1.2rem; /* Cambia los márgenes */
- padding: 0 3rem; /* Cambia el relleno */
Como antes, después de cada cambio ejecutar [ Run »] para ver las modificaciones.
Paso 4
Como última fase de esta etapa, agregaremos atributos de tipo class a las secciones definidas en 3, y a continuación procederemos a oprimir [ Run »] para observar si esto provoca algún cambio: si el proceso es correcto, nada debería modificarse.
Con esta finalidad, reemplazaremos todo el contenido de la división izquierda por lo que sigue (en negrita se marcan las modificaciones y en rojo el agregado de una sección abarcadora):
<!DOCTYPE html>
<html>
<head>
<title>Taller de Diseño de la Comunicación Multimedia</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* El operador «*» asterisco es un comodín para indicar TODO */
* {
box-sizing: border-box; /* Ajusta el tamaño de todas las cajas */
margin: 0; /* Elimina los márgenes para todos los elementos */
padding: 0; /* Elimina los rellenos para todos los elementos */
}
/* La etiqueta html comprende a todo el documento (se emplea aquí por razones técnicas) */
html {
font-family: "Lucida Sans", sans-serif; /* Asigna una fuente sin serifas */
font-size: 62.5%; /* Fija el tamaño global de referencia en 10px */
/* Los navegadores lo establecen en 16px */
/* Al reducirlo al 62,5% de 16 quedan 10px, más fácil de manejar que 16 */
}
/* La etiqueta body comprende a los contenidos visibles del documento */
body {
/* Colores básicos de figura y fondo*/
color: #000; /* Se fija el color de figura en negro (0 rojo, 0 verde, 0 azul) */
background-color: #fff; /* Se fija el color de fondo en blanco */
font-size: 1.5rem; /* Fija el tamaño nominal en 15px = 10px x 1,5 */
/* Por defecto, los textos de los párrafos serán de un tamaño de 15px o 1.5rem */
margin: 1rem 1.5rem; /* Separa a los contenidos de los bordes de la ventana */
}
/* Las etiquetas h1… h(n) identifican a los títulos */
h1, h2, h3, h4, h5, h6 {
color: gray; /* Asigna color a los títulos */
padding: .5em 0 .25em 0; /* Asigna rellenos proporcionales para los tíutlos */
/* El orden es superior - derecha - inferior - izquierda */
/* Los valores son 50% del valor M de la tipografía, 0px, 25% y 0px */
}
/* Las etiquetas p identifican a los párrafos */
p {
color: #404040;
/* Asigna un color particular para los párrafos (75% de negro) */
padding-bottom: 0.6em;
/* Asigna relleno de 9px = 0,6 de 15px debajo de los párrafos */
}
/* Las etiquetas ul, ol, dl, identifican a las listas */
/* Listas sin orden: ul; listas ordenadas: ol; listas de definición: dl */
ul, ol, dl {
margin: 0.6rem 1.5rem;
/* Asigna márgenes a las listas */
/* Los valores son 6px arriba y abajo, 15px a la izquierda y a la derecha */
}
/* Las etiquetas a identifican enlaces o hipervínculos */
a {
color: #0033cc; /* Asigna color azul medio a los enlaces */
font-weight: bold; /* Aumenta el peso tipográfico (negrita) */
text-decoration: none; /* Elimina la decoración (subrayado) */
}
/* Las pseudoclases :hover, :active y :visited redefinen estados especiales de los vínculos */
/* Hover refiere a cuando el cursor está sobre el vínculo */
a:hover {
color: #000; /* El color de los vínculos cambia a negro */
}
/* Active funciona cuando se hace click sobre el enlace */
a:active {
border-bottom: 1px dotted; /* Agrega una linea punteada */
}
/* Visited indica que el enlace ya fue visitado antes */
a:visited {
color:#009; /* Cambia el color a azul oscuro */
}
</style>
</head>
<body>
<div id="cabecera" class="cabecera"
<h1>La Canea</h1>
</div>
<div id="contenidos" class="lineal">
<div id="articulo" class="articulo"
<article id="contenido-1">
<h2>La ciudad</h2>
<p><strong>La Canea</strong> (o <em>Chania</em>) es una ciudad de la costa noroeste de la isla griega de <a href="https://www.lacreta.es" target="_blank">Creta</a>.</p>
<p>Es famosa por su <em>puerto veneciano del siglo XIV</em>, sus calles estrechas y sus restaurantes frente al mar.</p>
<p>En la entrada del puerto hay un faro del siglo XVI de influencia veneciana, egipcia y otomana.</p>
<p>En el <strong>Museo Náutico</strong>, ubicado justo enfrente, se exponen maquetas de barcos, objetos navales y fotografías.</p>
<p>El antiguo monasterio de <strong>San Francisco</strong> alberga al <strong>Museo Arqueológico de Chania</strong>.</p>
</article>
</div>
<div id="menu-principal" class="
<h3>Menú</h3>
<ul>
<li><a href="#">Cómo llegar</a></li>
<li><a href="#">La ciudad</a></li>
<li><a href="#">La isla</a></li>
<li><a href="#">La gastronomía</a></li>
</ul>
</div>
<div id="detalles" class="lateral">
<h4>¿Qué es?</h4>
<p>La Canea es una ciudad de la isla de Creta.</p>
<h4>¿Dónde está?</h4>
<p>Creta es una isla de Grecia sobre el Mar Mediterráneo.</p>
<h4>¿Cómo se llega?</h4>
<p>El aeropuerto de Chania tiene acceso desde cualquier país de Europa.</p>
<div>
</div>
</body>
</html>
Lo que hemos hecho fue incorporar atributos de clase (class) a las secciones, los que serán heredados por cada uno de los elementos que las integran.
Así, por ejemplo, podremos añadir temporalmente una clase cualquiera para visualizar los cambios heredados, por sobre la última línea de estilo <head>, inmediatamente sobre la etiqueta de cierre </style> incluiremos esta clase:
.cabecera h1 {
/* Establece una clase para el titular h1 de la cabecera de la página */
background-color: #c00;
/* Fija el color de fondo en violeta */
color: #ffff33;
/* Fija el color de figura en amarillo pálido */
padding: 1.5rem;
/* Establece un relleno de 15px en el interior de la caja */
}
Al oprimir [ Run »] se verá un cambio notable en la cabecera de la página.
Para finalizar esta etapa, reemplazaremos los estilos existentes con el agregado de clases, y a continuación ejecutaremos [ Run »] para ver los resultados:
<style>
/* El operador «*» asterisco es un comodín para indicar TODO */
* {
box-sizing: border-box; /* Ajusta el tamaño de todas las cajas */
margin: 0; /* Elimina los márgenes para todos los elementos */
padding: 0; /* Elimina los rellenos para todos los elementos */
}
/* La etiqueta html comprende a todo el documento (se emplea aquí por razones técnicas) */
html {
font-family: "Lucida Sans", sans-serif; /* Asigna una fuente sin serifas */
font-size: 62.5%; /* Fija el tamaño global de referencia en 10px */
/* Los navegadores lo establecen en 16px */
/* Al reducirlo al 62,5% de 16 quedan 10px, más fácil de manejar que 16 */
}
/* La etiqueta body comprende a los contenidos visibles del documento */
body {
/* Colores básicos de figura y fondo*/
color: #000; /* Se fija el color de figura en negro (0 rojo, 0 verde, 0 azul) */
background-color: #fff; /* Se fija el color de fondo en blanco */
font-size: 1.5rem; /* Fija el tamaño nominal en 15px = 10px x 1,5 */
/* Por defecto, los textos de los párrafos serán de un tamaño de 15px o 1.5rem */
margin: 1rem 1.5rem; /* Separa a los contenidos de los bordes de la ventana */
}
/* Las etiquetas h1… h(n) identifican a los títulos */
h1, h2, h3, h4, h5, h6 {
color: gray; /* Asigna color a los títulos */
padding: .5em 0 .25em 0; /* Asigna rellenos proporcionales para los tíutlos */
/* El orden es superior - derecha - inferior - izquierda */
/* Los valores son 50% del valor M de la tipografía, 0px, 25% y 0px */
}
/* Las etiquetas p identifican a los párrafos */
p {
color: #404040;
/* Asigna un color particular para los párrafos (75% de negro) */
padding-bottom: 0.6em;
/* Asigna relleno de 9px = 0,6 de 15px debajo de los párrafos */
}
/* Las etiquetas ul, ol, dl, identifican a las listas */
/* Listas sin orden: ul; listas ordenadas: ol; listas de definición: dl */
ul, ol, dl {
margin: 0.6rem 1.5rem;
/* Asigna márgenes a las listas */
/* Los valores son 6px arriba y abajo, 15px a la izquierda y a la derecha */
}
/* Las etiquetas a identifican enlaces o hipervínculos */
a {
color: #0033cc; /* Asigna color azul medio a los enlaces */
font-weight: bold; /* Aumenta el peso tipográfico (negrita) */
text-decoration: none; /* Elimina la decoración (subrayado) */
}
/* Las pseudoclases :hover, :active y :visited redefinen estados especiales de los vínculos */
/* Hover refiere a cuando el cursor está sobre el vínculo */
a:hover {
color: #000; /* El color de los vínculos cambia a negro */
}
/* Active funciona cuando se hace click sobre el enlace */
a:active {
border-bottom: 1px dotted; /* Agrega una linea punteada */
}
/* Visited indica que el enlace ya fue visitado antes */
a:visited {
color:#009; /* Cambia el color a azul oscuro */
}
.cabecera h1 {
/* Genera una clase .cabecera y la aplica al titular h1 */
background-color: #c00; /* Fija el color de fondo en rojo */
color: #ffff33; /* Fija el color de figura en amarillo pálido */
padding: 1.5rem; /* Establece un relleno de 15px en el interior de la caja */
}
.articulo {
margin: 1rem 1.5rem; /* Establece un margen de 10px en vertical y 15px en horizontal alrededor de la caja con clase .articulo */
}
.menu {
/* Genera una clase .menu con márgenes 0 */
margin: 0;
}
.menu h3 {
/* Elimina el titular Menú de la interfaz */
display: none;
}
.menu ul {
/* Asigna atributos a la lista del menú */
list-style-type: none; /* Elimina los marcadores de lista */
margin: 0; /* Quita los márgenes a la lista */
padding: 0; /* Quita el relleno a la lista */
}
.menu li a {
/* Asigna atributos a los items con enlaces de la lista del menú */
color: #fff;
/* Asigna el color de la figura de cada ítem */
margin-bottom: .6rem;
/* Separa los ítems 6px en la parte inferior */
padding: 1rem;
/* Asigna un relleno general de 10px */
background-color: #990033;
/* Asigna un color borravino al fondo de cada ítem */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
/* Crea una sombra proyectada para cada ítem del menú */
display: block;
/* Muestra a cada enlace como un bloque completo, con independencia de la longitud del texto */
}
.lateral {
/* Asigna atributos a los contenidos del id="detalles" */
background-color: #f60;
/* Fija el color de fondo en naranja */
padding: 1.5rem;
/* Establece un relleno de 15px */
text-align: left;
/* Asigna una alineación izquierda para los textos */
font-size: 1.4rem;
/* Establece el tamaño base del texto en 14px */
box-shadow: 0 1px 3px rgba(0,0,0,0.12),
0 1px 2px rgba(0,0,0,0.24);
/* Crea una sombra para la caja de la barra lateral */
}
.lateral h4,
.lateral p {
/* Modifica los atributos de los títulos h4 y de los párrafos de la clase .lateral */
color: #ffffff;
/* Establece el color del texto en blanco */
padding: 0;
/* Elimina los rellenos del texto */
}
.lateral h4 {
border-bottom: 1px solid yellow;
/* Agrega una línea amarilla debajo de los títulos h4 de .lateral */
padding-bottom: .5em;
/* Separa el texto del borde inferior el 50% de su tamaño*/
margin-bottom: .6rem;
/* Separa los h4 de la clase .lateral 6px del elemento debajo */
}
</style>
Hemos generado en este punto una serie de alteraciones evidentes en la forma en que se visualizan los contenidos sin cambiarlos en lo más mínimo, si hacemos abstracción del agregado de etiquetas que, a los fines generales no los varían en su condición de tales, aunque sí sirven para darles un orden semántico más claro al momento de analizarlos, clasificarlos y organizarlos.
Paso 5
En este punto, sólo tenemos contenidos jerarquizados en una única columna; agregaremos a éstos clases que nos permitan organizarlos en cajas más significativas y eficientes desde lo visual.
Para ello, dividiremos el espacio en 12 columnas que, por el momento, no tendrán una representación gráfica.
Primero, o bien añadiremos manualmente las clases marcadas en negrita-rojo en el código que sigue, o bien copiaremos y pegaremos el código en reemplazo del contenido dentro de <body></body> existente y presionaremos [ Run »] para ver que, otra vez, nada ha cambiado:
<body>
<div id="cabecera" class="cabecera col-12">
<h1>La Canea</h1>
</div>
<div id="contenidos" class="lineal">
<div id="articulo" class="articulo col-6">
<article id="contenido-1">
<h2>La ciudad</h2>
<p><strong>La Canea</strong> (o <em>Chania</em>) es una ciudad de la costa noroeste de la isla griega de <a href="https://www.lacreta.es" target="_blank">Creta</a>.</p>
<p>Es famosa por su <em>puerto veneciano del siglo XIV</em>, sus calles estrechas y sus restaurantes frente al mar.</p>
<p>En la entrada del puerto hay un faro del siglo XVI de influencia veneciana, egipcia y otomana.</p>
<p>En el <strong>Museo Náutico</strong>, ubicado justo enfrente, se exponen maquetas de barcos, objetos navales y fotografías.</p>
<p>El antiguo monasterio de <strong>San Francisco</strong> alberga al <strong>Museo Arqueológico de Chania</strong>.</p>
</article>
</div>
<div id="menu-principal" class="menu col-3">
<h3>Menú</h3>
<ul>
<li><a href="#">Cómo llegar</a></li>
<li><a href="#">La ciudad</a></li>
<li><a href="#">La isla</a></li>
<li><a href="#">La gastronomía</a></li>
</ul>
</div>
<div id="detalles" class="lateral col-3">
<h4>¿Qué es?</h4>
<p>La Canea es una ciudad de la isla de Creta.</p>
<h4>¿Dónde está?</h4>
<p>Creta es una isla de Grecia sobre el Mar Mediterráneo.</p>
<h4>¿Cómo se llega?</h4>
<p>El aeropuerto de Chania tiene acceso desde cualquier país de Europa.</p>
</div>
</div>
<div class="pie">
<p>Cambiar las dimensiones de la ventana para ver las adaptaciones del diseño.</p>
</div>
<body>
Esta flexibilidad del HTML5, que permite al generador de contenidos y al arquitecto de información incluir etiquetas y atributos sin cambiar la información ni su representación, es las que lo hace particularmente poderoso: los diseñadores de interfaces podemos optar por asignarles o no subatributos, modificar sus valores y reordenar el espacio –la representación de la información– sin tocar el HTML ni los contenidos.
Comenzaremos por agregar entonces nuevos estilos con clases y pseudoelementos a
.menu li a:hover,
.menu li a:active {
color: #ff0;
/* Modifica la conducta de los ítems del menú al paso del cursor */
}
.lineal {
padding: .6rem 1.2rem; /* Separa a los contenidos del borde de la caja */
}
.lineal::after {
/* Crea un pseudo elemento al final de la clase lineal para separarla */
content: "";
/* Deja el contenido del pseudo elemento vacío */
clear: both;
/* Borra conductas fluidas (a explicar) */
display: table;
/* Asigna comportamientos de tabla */
}
.pie p {
/* Establece el color de fondo en violeta */
color: white;
/* Establece el color de los textos en blanco */
text-align: center;
/* Fija la alineación de textos a centrada */
font-size: 1.4rem;
/* Asigna un tamaño de textos de 14 px */
padding: 1.5rem;
/* Asigna un relleno de 15px */
margin: .6rem 1.2rem;
}
.pie p {
/* Fija los atributos del pie de página */
background-color: #cc0000;
}
/* Se divide el ancho disponible de la ventana en 12 columnas */
.col-1 {width: 8.33%;} /* Corresponde a 1/12 del ancho disponible */
.col-2 {width: 16.66%;} /* Corresponde a 2/12 ó 1/6 del ancho disponible */
.col-3 {width: 25%;} /* Corresponde a 3/12 ó 1/4 del ancho disponible */
.col-4 {width: 33.33%;} /* Corresponde a 4/12 ó 1/3 del ancho disponible */
.col-5 {width: 41.66%;} /* Corresponde a 5/12 del ancho disponible */
.col-6 {width: 50%;} /* Corresponde a 6/12 ó 1/2 del ancho disponible */
.col-7 {width: 58.33%;} /* Corresponde a 7/12 del ancho disponible */
.col-8 {width: 66.66%;} /* Corresponde a 8/12 ó 2/3 del ancho disponible */
.col-9 {width: 75%;} /* Corresponde a 9/12 ó 3/4 del ancho disponible */
.col-10 {width: 83.33%;} /* Corresponde a 10/12 ó 5/6 del ancho disponible */
.col-11 {width: 91.66%;} /* Corresponde a 11/12 del ancho disponible */
.col-12 {width: 100%;} /* Corresponde a 12/12 o todo el ancho disponible */
/* Se hace fluir ordenadamente las estructuras encolumnadas */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8,.col-9, .col-10, .col-11, .col-12
{
float: left;
/* Cada elemento “flotará” hacia la izquierda hasta encontrar al precedente*/
margin: 0;
/* Se eliminan los márgenes que separan a cada columna*/
padding: 0.6rem 1.2rem;
/* Se establece un relleno que separa a los contenidos de los bordes de las columnas */
}
De modo que si, por ejemplo, un elemento cualquiera es de clase .col-6 dispondrá exactamente del 50% (6 de las 12 columnas ó 1/2 del total) del ancho total del elemento que lo contiene, y uno de clase .col-4 del 33,333% (4 de las 12 columnas, o 1/3 del total).
Este dimensionamiento relativo (llamado fluido o flexible) nos permitirá ordenar el espacio y controlar la forma en que se ven las estructuras de información, al tiempo que gestionará automáticamente el espacio disponible en horizontal, lo que puede verificarse moviendo la barra central que separa el código de la representación y/o cambiand
Existe una forma alternativa de asignar propiedades comunes a elementos cuyos nombres tienen coincidencias (como col-1…col-12) y que actúan de comodines. La última asignación (marcada en azul) puede sustituirse por el código acortado:
[class*="col-"] {
float: left;
/* Cada elemento “flotará” hacia la izquierda hasta encontrar al precedente*/
margin: 0;
/* Se eliminan los márgenes que separan a cada columna*/
padding: 0.6rem 1.2rem;
/* Se establece un relleno que separa a los contenidos de los bordes de las columnas */
}
Así, todas las clases que comiencen con "col-" tendrán por comprensión los atributos asignados antes por extensión. Este atajo nos será muy útil para el paso que sigue.
Paso 6
La organización diseñada funciona de un modo bastante aceptable en computadoras de escritorio y portátiles, pero presenta inconvenientes cuando las ventanas son angostas, o los dispositivos son móviles, en especial cuando la disposición es vertical.
Debemos recurrir al diseño adaptable o responsive (algo así como amable) que parte del reconocimiento del dispositivo y del espacio disponible en la ventana del navegador; con este fin se emplean reglas llamadas media queries (preguntas de los medios) que permiten responder según las condiciones del medio.
Comenzaremos por agregar clases (marcadas en negrita y rojo) a los elementos existentes, para que asuman anchos de columnas diferentes en el caso de tabletas; estas clases serán de tipo .col-s-… (para dispositivos más pequeños) y por lo tanto quedarán comprendidas en el comodín "col-" del paso anterior.
<body>
<div id="cabecera" class="cabecera col-12">
<h1>La Canea</h1>
</div>
<div id="contenidos" class="lineal">
<div id="articulo" class="articulo col-6 col-s-9">
<article id="contenido-1">
<h2>La ciudad</h2>
<p><strong>La Canea</strong> (o <em>Chania</em>) es una ciudad de la costa noroeste de la isla griega de <a href="https://www.lacreta.es" target="_blank">Creta</a>.</p>
<p>Es famosa por su <em>puerto veneciano del siglo XIV</em>, sus calles estrechas y sus restaurantes frente al mar.</p>
<p>En la entrada del puerto hay un faro del siglo XVI de influencia veneciana, egipcia y otomana.</p>
<p>En el <strong>Museo Náutico</strong>, ubicado justo enfrente, se exponen maquetas de barcos, objetos navales y fotografías.</p>
<p>El antiguo monasterio de <strong>San Francisco</strong> alberga al <strong>Museo Arqueológico de Chania</strong>.</p>
</article>
</div>
<div id="menu-principal" class="menu col-3 col-s3">
<h3>Menú</h3>
<ul>
<li><a href="#">Cómo llegar</a></li>
<li><a href="#">La ciudad</a></li>
<li><a href="#">La isla</a></li>
<li><a href="#">La gastronomía</a></li>
</ul>
</div>
<div id="detalles" class="lateral col-3 col-s-12">
<h4>¿Qué es?</h4>
<p>La Canea es una ciudad de la isla de Creta.</p>
<h4>¿Dónde está?</h4>
<p>Creta es una isla de Grecia sobre el Mar Mediterráneo.</p>
<h4>¿Cómo se llega?</h4>
<p>El aeropuerto de Chania tiene acceso desde cualquier país de Europa.</p>
</div>
</div>
<div class="pie">
<p>Cambiar las dimensiones de la ventana para ver las adaptaciones del diseño.</p>
</div>
</body>
Si todo se hizo correctamente, al oprimir [ Run »] no debería notarse ningún cambio.
Paso 7
Con este agregado de clases, permutaremos luego los anchos de las cajas desde computadoras a tabletas
- #articulo de .col-6 (50%) a .col-s-9 (75%)
- #detalles de .col-3 (25%) a .col-s-12 (100%)
- #menu mantendrá .col-3 en .
col-s-3 (25%)
En el caso de que la pantalla sea la de un teléfono celular, todas las columnas tendrán el 100% de ancho, cambiaremos el tamaño normal de los textos, y reduciremos la paleta de colores para ganar legibilidad en condiciones desfavorables.
Para que estas nuevas clases tengan efecto y respondan al comportamiento requerido para computadoras, tabletas o teléfonos móviles, es indispensable añadir unas líneas de estilo al final de las existentes, antes de la etiqueta </style>:
/* Establece una regla sólo para pantallas cuyo ancho máximo sea 768px ó menor */
@media only screen and (max-width: 768px) {
/* Para tabletas */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
/* Establece una regla sólo para pantallas cuyo ancho máximo sea 660px ó menor */
@media only screen and (max-width: 660px) {
/* Para teléfonos celulares */
[class*="col-"] {
/* Modifica los atributos de todas las clases col- */
width: 100%;
/* Establece el ancho en 100% del espacio disponible */
}
body, .lateral {
font-size: 1.8rem;
/* Incrementa el tamaño de los textos para ganar visibilidad */
background: white;
/* Deja los fondos en blanco */
margin: 0;
/* Elimina márgenes */
}
h1, h2 {
font-size: 2.4rem;
/* Reduce el tamaño de los títulos grandes para ganar espacio */
}
p, .lateral h4, .lateral p {
color: #000;
/* Lleva el color de textos a negro */
}
.lateral h4 {
border-bottom: 1px dotted #000000;
/* Cambia el subrayado de los títulos */
}
.cabecera h1, .menu li a, .pie p {
color: white;
/* Homologa los textos a blanco */
background-color: black;
/* Unifica los fondos a negro */
}
.lateral, .menu li {
box-shadow: none;
/* Elimina las sombras decorativas */
}
}
A presionar sobre el botón [ Run »] se obtendrá la nueva configuración, cuyas variantes de adaptabilidad pueden visualizarse
- cambiando el tamaño relativo de la ventana del navegador
- moviendo la línea separadora o
- haciendo click en el botón inmediatamente a la izquierda de [ Run »] para alterar la disposición de las ventanas internas
Paso 8
El objetivo de este ejercicio analítico (se ha dividido el problema general en problemas más pequeños y manejables) es comprender a través de la experimentación por propia iniciativa los aspectos elementales de una interfaz adaptable.
Corresponde en el paso 8 intentar alteraciones propias y documentarlas para obtener resultados distintos que sirvan para ganar habilidad en el manejo básico de las hojas de estilo en cascada (CSS).
Como ejemplo al azar, podría experimentarse con ligeras modificaciones en la asignación de clases en el HTML, como en:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-family: "Open Sans", sans-serif;
font-size: 62.5%;
}
body {
color: #fff;
background-color: #000;
font-size: 1.6rem;
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
padding: 0;
font-weight: lighter;
}
p {
color: #eee;
padding-bottom: 1em;
}
ul, ol, dl {
margin: 0.6rem 1.5rem;
}
a {
color: #fff;
}
a:hover {
color: #ff0;
}
a:active {
border-bottom: 1px dotted;
}
a:visited {
color:#888;
}
#cabecera.cabecera {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
overflow: hidden;
margin: 0;
padding: 0;
}
.cabecera h1 {
background-color: #c00;
color: #fff;
padding: 1rem 1.5rem;
}
#contenidos {
margin-top: 9rem;
}
.articulo {
margin: 0;
}
.articulo p {
text-indent: 1em;
padding: 1em 0 0;
}
.menu {
margin: 0;
}
.menu h3 {
display: none;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li a {
color: #fff;
padding: 1.5rem;
background-color: #a00;
display: block;
text-decoration: none;
text-align: center;
border-top: 1px solid #f00;
}
.lateral {
padding: 1.5rem;
text-align: left;
font-size: 1.4rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.lateral h4 {
font-weight: normal;
font-size: 2.1rem;
}
.lateral p {
color: #ffffff;
padding: .5em 1em 1em;
}
.lateral h4 {
border-bottom: 1px solid red;
padding-bottom: 1rem;
margin-bottom: .6rem;
}
.menu li a:hover, .menu li a:active {
color: #ff0;
}
.lineal {
padding: .6rem 1.2rem;
}
.lineal::after {
content: "";
clear: both;
display: table;
}
.pie p {
color: black;
text-align: left;
font-size: 1.4rem;
padding: 1.5rem;
margin: .6rem 1.2rem;
background-color: #999;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
[class*="col-"] {
float: left;
margin: 0;
padding: 0.6rem 1.2rem;
}
@media only screen and (max-width: 768px) {
.col-s-1 {
width: 8.33%;
}
.col-s-2 {
width: 16.66%;
}
.col-s-3 {
width: 25%;
}
.col-s-4 {
width: 33.33%;
}
.col-s-5 {
width: 41.66%;
}
.col-s-6 {
width: 50%;
}
.col-s-7 {
width: 58.33%;
}
.col-s-8 {
width: 66.66%;
}
.col-s-9 {
width: 75%;
}
.col-s-10 {
width: 83.33%;
}
.col-s-11 {
width: 91.66%;
}
.col-s-12 {
width: 100%;
}
}
@media only screen and (max-width: 660px) {
[class*="col-"] {
width: 100%;
}
body, .lateral {
font-size: 1.8rem;
background: rgb(0,0,0);
margin: 0;
}
h1, h2 {
font-size: 2.4rem;
}
#contenidos {
margin-top: 0;
}
p, .lateral h4, .lateral p {
color: #fff;
}
.lateral h4 {
border-bottom: 1px dotted #a00;
}
.cabecera h1, .menu li a, .pie p {
color: white;
background-color: #900;
}
}
Otra variante podría surgir de cambiar solamente las CSS, como en:
<div id="cabecera" class="cabecera col-4 col-s-12">
<div id="articulo" class="articulo col-8 col-s-12">
<div id="menu-principal" class="menu col-4 col-s-6">
<div id="detalles" class="lateral col-4 col-s-6">
