Download Diseño web adaptable - Comercio Electrónico (2809)

Diseño web adaptable
umh2809-CE
cia de navegación en dispositivos móviles sino también en
dispositivos de mayor resolución de pantalla como dispositivos de sobremesa.[3]
El concepto de One Web hace referencia a la idea de construir una ‘Web para Todos’ (Web for All) y accesible desde
cualquier tipo de dispositivo (Web on Everything).[4]
Hoy en día, la variedad de dispositivos existentes en el
mercado ha provocado que la información disponible no
sea accesible desde todos los dispositivos, o bien es accesible pero la experiencia de navegación es muy pobre.
2 Ventajas
Diseño web adaptativo (adaptable) o Responsive Web Design
(RWD).
El uso de dispositivos móviles está creciendo a un ritmo
increíble, dispositivos como tabletas y teléfonos inteligentes han incrementado sus ventas en los últimos años y la
navegación en Internet mediante estos dispositivos es cada vez más común. Ese es el motivo por el que el diseño
web adaptable se ha vuelto tan popular, pues es una técnica que proporciona una solución web que puede manejar
la visualización web tanto de escritorio como de dispositivos.
El diseño web adaptable, adaptativo o responsivo, conocido por las siglas RWD del inglés Responsive Web Design, es una filosofía de diseño y desarrollo cuyo objetivo
es adaptar la apariencia de las páginas web al dispositivo
que se esté utilizando para visualizarla. Hoy día las páginas web se visualizan en multitud de tipos de dispositivos
como tabletas, teléfonos inteligentes, libros electrónicos,
portátiles, PC, etcétera. Además, aún dentro de cada tipo, cada dispositivo tiene sus características concretas:
tamaño de pantalla, resolución, potencia de CPU, capacidad de memoria, entre otras. Esta tecnología pretende
que con un solo diseño web, se tenga una visualización
adecuada en cualquier dispositivo.
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: PC,
tabletas, teléfonos móviles, etcétera. Esto mejora la experiencia de usuario a diferencia de lo que ocurre, por
El diseñador y autor norteamericano Ethan Marcotte creó ejemplo, con sitios web de ancho fijo cuando se acceden
y difundió esta técnica a partir de una serie de artículos desde dispositivos móviles.
en A List Apart,[1] una publicación en línea especializada
De esta forma se reducen los costos de creación y manteen diseño y desarrollo web, idea que luego extendería en
nimiento cuando el diseño de las pantallas es similar entre
su libro Responsive Web Design.
dispositivos de distintos tamaños.
También se supone que evita tener que desarrollar aplicaciones ad-hoc para versiones móviles, o no, por ejemplo,
1 Origen del diseño web adaptable una aplicación específica para iPhone, otra para móviles
Android, etcétera,[5] aunque hoy en día las webs para móTanto la idea como el propósito del diseño web adaptable viles todavía no pueden realizar las mismas funciones que
fueron previamente discutidos y descritos por el World las aplicaciones nativas.
Wide Web Consortium (W3C) en julio de 2008 en su re- Desde el punto de vista de la optimización de motores
comendación “Mobile Web Best Practices” bajo el subtí- de búsqueda, sólo aparecería una URL en los resultados
tulo “One Web”.[2]
de búsqueda, con lo cual se ahorran redirecciones y los
Dicha recomendación, aunque específica para dispositi- fallos que se derivan de estas. También se evitarían errovos móviles, puntualiza que está hecha en el contexto de res al acceder al sitio web en concreto desde los llamados
One Web, y que por lo tanto engloba no solo la experien- social links, es decir, desde enlaces que los usuarios com1
2
5
parten en medios sociales tales como Facebook o Twitter,
y que pueden acabar en error dependiendo de qué enlace se copió (desde qué dispositivo se copió) y desde qué
dispositivo se accede.[6]
3
Funcionamiento
El diseño web adaptable 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.
4
Referencias
[1] Traducción del artículo original “Responsive Web Design”
por Ethan Marcotte (en español).
[2] Artículo sobre Recomendación oficial del consorcio W3C
en Arbor Web Solutions (en inglés).
[3] Apartado 3.1 OneWeb en la recomendación “Mobile Web
Best Practices” del consorcio W3C (en inglés).
[4] La misión de W3C (en inglés).
[5] Beneficios del Responsive Web Design en ecbloguer.com
[6] «SEO Benefits of Responsive Web Design.» (en inglés).
5
Enlaces externos
• www.w3c.es Oficina española del W3C.
• Responsive Web Design por Ethan Marcotte.
• diseñowebresponsivo.com.ar Traducción del artículo original “Responsive Web Design”, por Ethan Marcotte.
ENLACES EXTERNOS
3
6
Origen del texto y las imágenes, colaboradores y licencias
6.1
Texto
• Diseño web adaptable Fuente: https://es.wikipedia.org/wiki/Dise%C3%B1o_web_adaptable?oldid=89673762 Colaboradores: Sabbut,
Reignerok, BOT-Superzerocool, Zelkova~eswiki, Fercufer, Patriciadedo, CommonsDelinker, Technopat, Carlusjove~eswiki, Chemtox,
Marcecoro, Eduardosalg, UA31, Arjuno3, Billinghurst, Xqbot, Jkbw, Tajajon, FrescoBot, EmausBot, ZéroBot, Antoswe, Grillitus, ChuispastonBot, MerlIwBot, MetroBot, Invadibot, Cabuja, Elvisor, Le Lapin Vert, Helmy oved, Sorin Cojocaru, Ainhoajulian, Miky1974,
Addbot, Maestrodelweb, Sato92, AntonioRigo, XFacco, Kako s69, JoelDavidHG, JOSE LUIS DOBUSS, Inkieto, Ramonhernandez1720,
Ks-M9, Guaddy y Anónimos: 31
6.2
Imágenes
• Archivo:Diseno-web-responsive-design.jpg
Fuente:
https://upload.wikimedia.org/wikipedia/commons/e/e7/
Diseno-web-responsive-design.jpg Licencia: CC BY-SA 4.0 Colaboradores: http://www.dobuss.es/ Artista original: JOSE LUIS
DOBUSS
6.3
Licencia del contenido
• Creative Commons Attribution-Share Alike 3.0