lunes, 16 de junio de 2014

Las estructuras flexibles con CSS y HTML



1. Las técnicas

Los sitios web que no se preocup(ab)an en tener un diseño adaptable presentan, en su gran mayoría, una arquitectura basada en dimensiones fijas. Una u otra caja <div> presentará entre sus propiedades CSS un ancho establecido con un valor fijo: width: 730px. Esto hace que el tamaño de la caja siempre sea el mismo, independientemente del tamaño de la pantalla en la cual se visualice. Así, si se accede al sitio web a partir de un smartphone o de una tableta, las dimensiones no variarán, puesto que son fijas, y el sitio web no se adaptará en absoluto.

Para que el diseño de un sitio web sea adaptable, será necesario que las dimensiones de los contenedores (<div>, <nav>, <header>...) estén indicadas en unidades relativas: en porcentajes.

Tendremos entonces una sintaxis de tipo:

header#inicio {
...
width: 75%;
...
}

Esto quiere decir que el elemento <header>, que tiene el código de identificación #inicio, se visualizará con un ancho del 75% del ancho de su elemento padre.

Eso implica que usted, el diseñador web, deberá corregir todos los elementos estructurales (<div>, <nav>, <header>...) que tengan dimensiones fijas, para asignarles dimensiones relativas en función de una búsqueda Media Queries.

Además, puede usar la palabra clave !important, en sus reglas CSS modificadas, para que tengan prioridad frente a cualquier otra regla declarada de manera "habitual", sin búsqueda de medios de difusión.

También puede ser interesante fijar un ancho máximo para los elementos de contenido (imágenes, tablas...) con la propiedad max-width: 100%, para que su tamaño nunca sea mayor que el de su elemento padre.

Igualmente, deberá prestar atención al texto que sea más largo que su contenedor. Utilice para ello la propiedad word-wrap: break-word.

Por último, use siempre tamaños relativos para los caracteres con las unidades em o %.


2. Un ejemplo sencillo

Vamos a crear una caja <div> contenedor (#contenedor) que va a contener otras dos cajas <div> (#izquierda y #derecha). El contenedor tendrá un tamaño flexible del 75% respecto a su elemento padre, el <body>. La caja #izquierda tendrá un ancho flexible igual al 60% de su elemento padre #contenedor. La caja #derecha tendrá un ancho flexible igual al 40% de su elemento padre #contenedor.

Evidentemente, la suma de los dos porcentajes no deberá ser superior a 100%.

Esta es la parte HTML:

<div id="contenedor">
<div id="izquierda">
<p>Feugait qui...</p>
</div>
<div id="derecha">
<p>Ut illum dolor...</p>
</div>
</div>

Esta es la parte CSS:

body {
font: .8em Verdana, Arial, Helvetica, sans-serif;
}
p {
margin: 5px;
}
#contenedor{
width: 75%;
margin: 0 auto;
}
#izquierda {
float: left;
width: 60%;
background-color: #cecece;
}
#derecha{
float: left;
width: 40%;
background-color: #f8f8f8;
}

El contenedor (#contenedor) y las dos cajas que contiene (#izquierda y #derecha) tendrán siempre un tamaño flexible, proporcional al ancho del <body>, en función del tamaño de la ventana del navegador.

Así se visualizará con una pantalla de gran tamaño:


Así se visualizará con una pantalla de menor tamaño:



3. Ejemplo de un sitio web sencillo

Vamos a crear un sitio web con un diseño flexible. Será un sitio web muy sencillo, con un encabezado (<header>), un menú de navegación (<nav>), una columna (<section>), en la parte izquierda, con tres artículos (<article>), una barra lateral (<aside>), en la parte derecha, con una imagen y una lista. Y, por último, un pie de página (<footer>).

Este sería el código HTML5 de la página web:

<!DOCTYPE HTML>
<html lang="es">
<head>
<title>Título de la página web</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="rwd-1.css" />
</head>
<body>
<div id="contenedor">
<header id="arriba">
<h1>Mi sitio web</h1>
<h2>El eslogan de mi sitio web</h2>
</header>
<nav id="menu-navegacion">
<p><a href="#">Vínculo 1</a> | <a href="#">Vínculo 2</a> |
<a href="#">Vínculo 3</a> | <a href="#">Vínculo 4</a> |
<a href="#">Vínculo 5</a> | <a href="#">Vínculo 6</a></p>
</nav>
<section id="contenido">
<article>
<h1>Mi primer artículo</h1>
<p>Morbi leo risus...</p>
<p>Integer posuer...</p>
</article>
<article>
<h1>Mi segundo artículo</h1>
<p>Etiam porta...</p>
<p>Lorem ipsum...</p>
</article>
<article>
<h1>Mi tercer artículo</h1>
<p>Morbi leo...</p>
<p>Integer posuere...</p>
</article>
</section>
<aside id="sidebar">
<p><img src="tigre.jpg" alt="Un tigre" /></p>
<ul>
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
<li>Cuarto</li>
</ul>
</aside>
<footer id="piedepagina">
<p>Concepción y realización: yo mismo. Contacto:
<a href="mailto:contacto@midominio.org">contacto@midominio.org</a></p>
</footer>
</div>
</body>
</html>

Estos serían los estilos CSS3:

/* Estilo general */
body {
padding: 0;
background-color: gray;
font: .8em Verdana, Arial, Helvetica, sans-serif;
}
body, h1, h2, p {
margin: 0;
}
div#contenedor{
width: 940px;
margin: 20px auto 0 auto;
padding: 10px;
background-color: white;
border-radius: 10px;
}
/* El encabezado */
header#arriba {
margin: 0 0 10px 0;
padding: 5px;
background-color: gray;
border-radius: 10px;
}
header#arriba h1, header#arriba h2 {
color: white;
}
/* El menú de navegación */
nav#menu-navegacion {
margin: 0 0 10px 0;
padding: 5px;
background-color: silver;
border-radius: 10px;
}
nav#menu-navegacion p {
color: white;
}
nav#menu-navegacion a {
text-decoration: none;
color: white;
}
/* El contenido principal */
section#contenido{
float: left;
width: 720px;
padding: 5px;
}
article {
margin: 0 0 20px 0;
border-top: 1px dotted #333;
}
/* La columna lateral */
aside#sidebar {
float: left;
width: 190px;
margin: 0 0 0 10px;
padding: 5px;
border-radius: 5px;
background-color: #E8E8E8;
}
aside#sidebar p {
text-align: center;
}
/* El pie de página */
footer#piedepagina {
padding: 5px;
border-radius: 5px;
background-color: #E8E8E8;
clear: both;
}
footer#piedepagina p {
text-align: center;
font-size: .75em;
}

Este sería el resultado en una pantalla de ordenador:


Este sería el resultado en un iPhone:



4. Aplicar un diseño adaptable sencillo

En un primer momento, tendremos que añadir la línea para el viewport en la cabecera de la página HTML, en el <head>.

<head>
...
<meta name="viewport" content="width=device-width" />
...
</head>

En el archivo CSS, vamos a insertar una búsqueda Media Queries, al final de la página. Vamos a seleccionar la difusión en pantalla para un tamaño máximo.

@media screen and (max-width: 768px) {
...
}

¿Por qué he elegido el tamaño máximo de 768 píxeles? Simplemente, porque ese es el ancho de un iPad.

Queremos que el fondo de la página sea blanco, y no gris, como en la versión para la pantalla de ordenador.

@media screen and (max-width: 768px) {
body {
background-color: #fff;
}
}

Queremos que la caja <div id="contenedor">, en lugar de tener un tamaño fijo, tenga un tamaño relativo, para que ocupe todo el espacio disponible en su elemento padre <body>.

@media screen and (max-width: 768px) {
body {
background-color: #fff;
}
div#contenedor{
width: 100%;
margin: 0;
}
}

El color de fondo del banner de la parte de arriba será negro, con el texto en blanco.

@media screen and (max-width: 768px) {
body {
background-color: #fff;
}
div#contenedor{
width: 100%;
margin: 0;
}
header#arriba{
background-color: #000;
color: #fff;
}
}

Los dos contenedores (<section> y <aside>) ya no podrán ser flotantes, para ganar espacio y tener así contenedores que se superpongan verticalmente.

@media screen and (max-width: 768px) {
body {
background-color: #fff;
}
div#contenedor {
width: 100%;
margin: 0;
}
header#arriba{
background-color: #000;
color: #fff;
}
section#contenido{
float: none;
width: auto;
}
aside#sidebar {
float: none;
width: auto;
margin: 0 0 10px 0;
}
}

No queremos mostrar la imagen (<img>) en la barra lateral, una vez más, para ganar espacio y concentrarnos en el contenido.
.
@media screen and (max-width: 768px) {
body {
background-color: #fff;
}
div#contenedor{
width: 100%;
margin: 0;
}
header#arriba{
background-color: #000;
color: #fff;
}
section#contenido{
float: none;
width: auto;
}
aside#sidebar {
float: none;
width: auto;
margin: 0 0 10px 0;
}
aside#sidebar img {
display: none;
}
}

Por último, vamos a adaptar el tamaño de los títulos <h1> de los artículos.

@media screen and (max-width: 768px) {
body {
background-color: #fff;
}
div#contenedor{
width: 100%;
margin: 0;
}
header#arriba {
background-color: #000;
color: #fff;
}
section#contenido {
float: none;
width: auto;
}
aside#sidebar {
float: none;
width: auto;
margin: 0 0 10px 0;
}
aside#sidebar img {
display: none;
}
article h1 {
font-size: 1.5em;
}
}

Así se visualizará en un iPhone 4:


Así se visualizará en un iPad:



5. Las plantillas flexibles

Estas son algunas URL que tratan sobre plantillas adaptables:



Espero haber ayudado en algo. Hasta la próxima oportunidad!







No hay comentarios:

Publicar un comentario

       

Etiquetas

Accediendo a datos con ADO .NET (31) Acceso a la red (30) Algoritmo (34) Algoritmos en JAVA (2) Ampliación de clases (2) APRENDA A PROGRAMAR COMO SI ESTUVIERA EN PRIMERO - Autores : IKER AGUINAGA (3) APRENDA A PROGRAMAR COMO SI ESTUVIERA EN PRIMERO - Autores : IKER AGUINAGA (10) Aprendiendo a desarrollar en Windows 8 (5) Aprendiendo UML en 24 Horas (Autor : Joseph Schmuller ) (30) Arquitectura (29) Arquitectura del Computador (3) Arquitectura del Computador - Historia de la informática (1) Asignación de direcciones IP (23) Aspectos fundamentales de bases de datos (5) Auditoría de la dirección (2) Auditoría de Sistemas (3) Auditoría Informática - Un enfoque práctico - Mario G . Piattini y Emilio del Peso (7) Avanzado (23) Base de Datos (67) Básico (23) Bios (29) Business Productivity Online Suite - BPOS (3) Capa de Red (22) Capa de Transporte (16) Capítulo 1 - Documentos HTML5 (6) Capítulo 10. API Web Storage (2) Capítulo 11. API IndexedDB (4) Capítulo 12. API File (1) Capítulo 2. Estilos CSS y modelos de caja (7) Capítulo 3. Propiedades CSS3 (4) Capítulo 4. Javascript (6) Capítulo 5. Video y audio (6) Capítulo 6. Formularios y API Forms (8) Capítulo 7. API Canvas (5) Capítulo 8. API Drag and Drop (2) Capítulo 9. API Geolocation (2) CCNA1 v5.0 (239) CCNA1 v6.0 (23) CCNA2 v5.0 (26) CCNA3 v5.0 (25) CCNA4 v5.0 (23) CD-ROM (3) Chapter 1 How does Xamarin.Forms fit in? (7) Chapter 2 Anatomy of an app (5) Cisco (341) Cloud Computing (3) CNNA v5.0 Routing & Switching (260) CNNA v6.0 Routing & Switching (2) Codigo (2) Computadora (32) Configuración (29) Configuración de un sistema operativo de red (21) Control (29) Creación de tipos de datos y tablas (3) Creación y Administración de bases de datos (3) Creando la Interface de la Aplicación Windows (50) Creating Mobile Apps with Xamarin.Forms (13) Cuenta (29) Curso (32) Curso Aprendiendo a Programar (25) Datos (3) Desarrollando en Windows 8 - AVANZADO (2) Desarrollando en Windows 8 - BÁSICO (3) Desarrollando en Windows 8 - INTERMEDIO (2) Desarrollo (2) Desarrollo .Net (21) Desarrollo avanzado de Windows Store Apps usando C# (1) Desarrollo basado en conceptos de Ingeniería de Software para Visual Studio (2) DESARROLLO DE APLICACIONES WINDOWS CON MICROSOFT .NET (37) DESARROLLO DE APLICACIONES WINDOWS CON MICROSOFT .NET (Autor: Luis Dueñas Huaroto) (29) Desarrollo en Microsoft Visual Studio (44) Desarrollo en Microsoft Visual Studio - AVANZADO (15) Desarrollo en Microsoft Visual Studio - BÁSICO (14) Desarrollo en Microsoft Visual Studio - INTERMEDIO (18) Desarrollo en Windows Phone 8 (13) Diagnostico (4) Diagrama (3) Diagramas de actividades (2) Diagramas de colaboraciones (2) Diagramas de secuencias (2) Digital (2) Diplomado (2) Disco (29) Disco Duro (4) Diseño de aplicaciones de Windows 8 en HTML 5 (7) Dispositivos Electrónicos (11) Doctorado (2) Ejemplos de algoritmos (27) El camino hacia el CSS3 (3) El diseño web flexible (6) El elemento de diseño Canvas (3) El enfoque de los sistemas (3) El flujo de un programa (2) El gran libro de HTML5 - CSS3 y Javascript - Autor: Juan Diego Gauchat (55) El principio de organicidad (7) Electrónica (2) Elementos de un sistema (5) Empresas (2) Entrada y salida (4) Entropía y neguentropía (7) Estrategia (2) Estructura de un programa Java (12) Estructuras de almacenamiento (10) Estructuras de control (6) Estructuras de las tablas en SQL Server (2) Estructuras fundamentales de los datos (2) Ethernet (21) Evolución y Familias de los Microprocesadores (15) Exámen (23) Exploración de la red (23) Extensión de clases (4) Facebook (4) Familia Intel (15) Forefront (8) Función (3) Funciones de una red (12) Funciones de una red informática (1) Fundamentos de C# para absolutos principiantes (17) Fundamentos de programación en Java (50) Generaciones de la computadora (5) Gestión (3) Gestión de riesgos - Auditoría de Sistemas (1) GONZALO MARTÍNEZ (1) Grupos Facebook (1) Harvard (29) Historia de las computadoras (11) HTML5 y CSS3 - Autor: Christophe Aubry (99) HTML5 y CSS3 aplicadal texto (7) HTML5 y CSS3 para los formularios (15) Imágenes (2) Implementación de Windows 7 (11) Información (31) Informática (29) Ingeniería (4) Instalar (29) Inteligencia (2) Inteligencia de Negocios con SQL Server (3) Intermedio (23) Internet (29) Internet Explorer 9 (3) Introducción a ASP.NET 5 (8) Introducción a Java (7) Introducción a jQuery (8) Introducción a la Auditoría de Sistemas (2) Introducción a la teoría general de sistemas (Oscar Johansen Bertoglio) (39) Introducción a Networking (2) Introducción a Window Forms (5) Introducción al acceso a datos con ADO .NET (9) Investigación de Operaciones (12) Java (52) Jump Start de consultas en las bases de datos de Microsoft SQL Server 2012 (8) La definición de un Sistema (6) La evolución del HTML y del CSS (3) La nueva sintaxis HTML5 (12) LA QUINTA DISCIPLINA en la práctica (Autor : Peter Senge) (28) Las animaciones en CSS3 (5) Las transformaciones CSS3 (11) Las transiciones con CSS3 (8) Licenciamiento Microsoft (3) Local Area Network (LAN) - Red de Area Local (2) Lógico (2) Los elementos de la estructura en html5 (9) Los elementos multimedia: audio y vídeo (2) Los estilos de caja en CSS3 (13) Los nuevos selectores de CSS3 (6) Maestría (2) Mantenimiento de Mouse y Teclado (2) Manual de Microsoft SQL Server - Full Transact SQL (68) Manual de soporte técnico para escuelas sobre windows 7 (42) Marco Teorico de Investigación de Operaciones (6) Medios de Almacenamiento (11) Medios de Networking (2) Mejorando la Interface de las Aplicaciones Windows (26) Memoria Tipos y Clases (5) Método (2) Metodología (1) Microsoft (324) Microsoft Lync 2010 (7) Microsoft Silverlight 4.0 (2) Microsoft Virtual Academy (356) Modelo (2) Modelo OSI y TCP-IP (2) Modelos con poco grado de dificultad de Programación Lineal - Investigación de Operaciones (13) Modelos con razonable grado de dificultad de Programación Lineal - Investigación de Operaciones (10) Modelos de desafio de Programación Lineal - Investigación de Operaciones (5) Modelos difíciles de Programación Lineal - Investigación de Operaciones (5) Modelos Fáciles de Programación Lineal - Investigación de Operaciones (13) Modelos lineales con solver (3) Modulo (23) Movimiento (2) Mozilla (29) MS SQL Server (77) MS Virtualization para Profesionales VMware - Gestión (3) MS Virtualization para Profesionales VMware- Plataforma (4) MVA (263) Negocio (2) Nivel Avanzado Desarrollo .Net (6) Nivel Básico Desarrollo .Net (11) Nivel Intermedio Desarrollo .Net (8) Normas técnicas peruanas y su evolución - Auditoría de Sistemas (1) Nube Privada - Avanzado (6) Nube Privada - Básico (6) Nube Privada - Intermedio (6) Office 365 (3) Optimización de Escritorio (10) Optimización de Escritorio - Avanzado (4) Optimización de Escritorio - Básico (3) Optimización de Escritorio - Intermedio (3) ORACLE 10g - ADMINISTRACIÓN Y ANÁLISIS (3) Oracle 10g y el Grid Computing (3) Organización aleatoria y secuencial (1) Partes principales de la Mainboard (12) Perceptron (2) Perfil (2) Periféricos de Entrada / Salida (15) Pesi (2) PHP y MySQL - Manual de aprendizaje para crear un sitio web - Autor : Olivier ROLLET (79) Plan (2) Plataforma (29) PMBOK (24) PMBOK - Guía de los fundamentos para la dirección de proyectos (24) PMBOK - INFLUENCIA DE LA ORGANIZACIÓN Y CICLO DE VIDA DEL PROYECTO (6) PMBOK - Introducción (11) PMBOK - PROCESOS DE LA DIRECCIÓN DE PROYECTOS (5) Prevención - Herramientas e Instrumentos de Medida (9) Principios básicos de enrutamiento y switching (213) Proceso (2) Proceso de auditoría de sistemas informáticos (2) Programación en Android - Auor : Salvador Gómez Oliver (46) Programación paso a paso de C# - Autor : Nacho Cabanes (16) Protocolos y comunicaciones de red (17) Proyecto (2) Qué es un sistema (4) Red de Área Local Inalámbrica (WLAN) (4) Redes (30) Redes inalámbricas - WIRELESS - Conocimiento general (15) Redes neuronales (2) Redes y Comunicaciones (45) Reparación de Fuentes - UPS - Estabilizadores (10) Reparación de Impresoras (9) Reparación de Monitores (16) Router (29) Seguridad en la Nube (3) Seminario (23) Server (24) Sharepoint 2010 - Nivel Básico (6) Sharepoint 2010 - Niveles Avanzados (18) Sharepoint 2010 - Niveles Avanzados - Básico (8) Sharepoint 2010 - Niveles Avanzados - Intermedio (9) Sinergia y recursividad (4) Sistema (33) Sistema de Cableado Estructurado (9) Software (30) SOLUCIÓN GRÁFICA DE MODELOS DE PROGRAMACIÓN LINEALES - INVOPE (8) Soporte a Infraestructura (3) SQL (38) SQL Azure - Introducción (3) Subsistemas de control (4) Tablas (4) Tarjeta Principal del Sistema (10) Tarjetas de Interfaces (7) Tecnología (31) Tecnologías LAN (1) TEORÍA GENERAL DE SISTEMAS (1) Tic (2) Tipo (2) TML5 y CSS3 - Autor: Christophe Aubry (12) Trabajando con el Formulario (7) Un diseño HTML5/CSS3: dConstruct 2011 (3) Un diseño HTML5/CSS3: FlipThru (2) Un diseño HTML5/CSS3: The Cat Template (2) Usando Controles Windows Forms (12) Usando Herramientas de Datos de Visual Studio (6) Ventas (2) Virtualización Hyper - V Nivel Básico (5) Virtualización Hyper - V Nivel Intermedio (5) What’s New in Windows 8.1 Security (4) Window (29) Windows 7 Segunda Fase - AVANZADO (4) Windows 7 Segunda Fase - BÁSICO (6) Windows 7 Segunda Fase - INTERMEDIO (4) Windows 8 - Vista Previa (4) Windows 8.1 To Go (2) Windows Azure (3) Windows Phone 7 (2) Windows Server 2008 R2 (3) Windows Server 2012 - Gestión y Automatización (3) Windows Server 2012 R2 Essentials (7) Windows Server 2012: Almacenamiento (5) Windows Server 2012: Identidad y Acceso (4) Windows Server 2012: Revisión Técnica (7) Xamarin (1)

Páginas vistas en total según Google