Responsive Web Design
El diseño web adaptativo o adaptable (en inglés, Responsive Web Design) es una técnica de diseño y desarrollo web donde esta se adapte a la resolución de la pantalla o al dispositivo que está visitando su página web de manera inteligente.
El Responsive Web Design ayuda a que su página se adapte a los tamaños de casi cualquier pantalla, como por ejemplo, las de los Celulares, SmartPhones, Tablet’s, Laptops, Notebook o PC de escritorios. Prácticamente a cualquier dispositivo que pueda navegar en internet, Cabe mencionar que para las personas que tiene un página web espesificamente para dispositivos móviles, están obligados a incorporar esta tecnología.
LENGUAJES USADOS EN EL DISEÑO WEB ADAPTATIVO: :
-Sublime Text 2
-Dashcode
-Textwrangler
-Coda
-Dreamweaver
VENTAJAS
Con una sola versión en HTML y CSS se cubren todas las resoluciones de pantalla, es decir, el sitio web creado estará optimizado para todo tipo de dispositivos: PCs, tabletas, teléfonos móviles, etc. Esto mejora la experiencia de usuario a diferencia de lo que ocurre, por ejemplo, con sitios web de ancho fijo cuando se acceden desde dispositivos móviles.
De esta forma se reducen los costos de creación y mantenimiento, pues se evita tener que desarrollar aplicaciones para cada versión de móviles, por ejemplo, una aplicación específica para iPhone, otra para móviles Android, etc. Hablando de ingeniería y optimización de nuestra página web tendremos una única dirección para cualquier visitante sea cual sea su dispositivo con el cual se conecte, con lo cual se evitan errores y fallos.
Hay tres características técnicas que suponen el eje de un diseño web con estas capacidades:
· Consultas de tipos de medios y listeners de consulta de tipos de medios
· Un diseño de página flexible, basado en cuadrícula, que utilice tamaños relativos
· Contenidos e imágenes flexibles aplicando cambios de escala dinámicos o mediante CSS.
FUNCIONAMIENTO
El Responsive Web Design se hace posible gracias a la introducción de las Media Queries en las propiedades de los estilos CSS en su versión número 3. Las media queries son una serie de órdenes que se incluyen en la hoja de estilos que indica al documento HTML cómo debe comportarse en diferentes resoluciones de pantalla.
Para entenderlo mejor, los diseños de las páginas web, al igual que los periódicos y las revistas, están basados en columnas, entonces con la filosofía del diseño adaptativo, si una web a resolución de PC (1028x768 px) tiene 5 columnas, para una tableta (800x600 píxeles) necesitaría sólo 4, y en el caso de un teléfono inteligente cuyo ancho suele ser entre 320 y 480 píxeles las columnas usadas serían 3.
Ejemplo de Responsive Web Design
<!DOCTYPE html>
<html lang="en-us">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Responsive Web Design Demo</h1>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</body>
</html>
No hay comentarios:
Publicar un comentario