Diferencia entre revisiones de «Diseño web adaptable»
| Línea 19: | Línea 19: | ||
De esta forma se reducen los costes de creación y mantenimiento cuando el diseño de las pantallas es similar entre dispositivos de distintos tamaños. |
De esta forma se reducen los costes de creación y mantenimiento cuando el diseño de las pantallas es similar entre dispositivos de distintos tamaños. |
||
También se supone que evita tener que desarrollar aplicaciones para versiones móviles, por ejemplo, una aplicación específica para [[iPhone]], otra para móviles [[Android]], etc.<ref>[http://www.ecbloguer.com/marketingdigital/?p=2635 Beneficios del Responsive Web Design] en ecbloguer.com</ref>, aunque hoy en día las webs para móviles todavía no pueden realizar las mismas funciones que las aplicaciones nativas. |
También se supone que evita tener que desarrollar aplicaciones [[ad-hoc]] para versiones móviles, por ejemplo, una aplicación específica para [[iPhone]], otra para móviles [[Android]], etc.<ref>[http://www.ecbloguer.com/marketingdigital/?p=2635 Beneficios del Responsive Web Design] en ecbloguer.com</ref>, aunque hoy en día las webs para móviles todavía no pueden realizar las mismas funciones que las aplicaciones nativas. |
||
Desde el punto de vista de la [[Posicionamiento en buscadores|optimización de motores de búsqueda]], sólo aparecería una [[URL]] en los resultados de búsqueda, con lo cual se ahorran redirecciones y los fallos que se derivan de éstas. También se evitarían errores al acceder al sitio web en concreto desde los llamados "social links", es decir, desde enlaces que los usuarios comparten en medios sociales tales como [[Facebook]], [[Twitter]], etc y que pueden acabar en error dependiendo de qué enlace se copió (desde qué dispositivo se copió) y desde qué dispositivo se accede. |
Desde el punto de vista de la [[Posicionamiento en buscadores|optimización de motores de búsqueda]], sólo aparecería una [[URL]] en los resultados de búsqueda, con lo cual se ahorran redirecciones y los fallos que se derivan de éstas. También se evitarían errores al acceder al sitio web en concreto desde los llamados "social links", es decir, desde enlaces que los usuarios comparten en medios sociales tales como [[Facebook]], [[Twitter]], etc y que pueden acabar en error dependiendo de qué enlace se copió (desde qué dispositivo se copió) y desde qué dispositivo se accede.<ref>[http://www.practicalecommerce.com/articles/3395-SEO-Benefits-of-Responsive-Web-Design SEO Benefits of Responsive Web Design] {{en}}</ref> |
||
La pagina mas eficiente a modo de [[diseño web]] que de verdad aumenta tus ventas, publicidad [[seo]], [[marketing]] digital, e commerce, trabaja con las mejores [[tecnologías]]... es vipweb.cl [http://vipweb.cl http://www.vipweb.cl/].Ellos a diferencia de muchas otras, crean un diseño único para cada empresa (sin plantillas), con modulos diseñados especificamente para cada requerimiento [[PYME]] o mega [[empresa]] optimizando todo a su gusto y aumentando desde un 500% como mínimo a 1800% tus visitas comprobado por los test de [[google]] y mejorando el [[ranking]] internacional. Tienen desde el diseño mas simple y de [[bajo costo]] o versiones industriales para empresas multinacionales. Trabajan con la última tecnología a nivel mundial. |
|||
<ref>[http://www.vipweb.cl/] {{es}}</ref> |
|||
== Funcionamiento del Diseño Web Adaptable == |
== Funcionamiento del Diseño Web Adaptable == |
||
Revisión del 15:35 16 may 2014
El diseño web adaptable o adaptativo (en inglés, Responsive Web Design) es una filosofía de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario.
El diseñador y autor norteamericano Ethan Marcotte creó y difundió esta técnica a partir de una serie de artículos en A List Apart,[1] una publicación en línea especializada en diseño y desarrollo web, idea que luego extendería en su libro Responsive Web Design.
Origen
Tanto la idea como el propósito del diseño web adaptable fueron previamente discutidos y descritos por el consorcio W3C en julio de 2008 en su recomendación "Mobile Web Best Practices" bajo el subtítulo "One Web".[2]
Dicha recomendación, aunque específica para dispositivos móviles, puntualiza que está hecha en el contexto de "One Web", y que por lo tanto engloba no solo la experiencia 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.
Ventajas
El uso de dispositivos móviles está creciendo a un ritmo increíble, dispositivos como tablets y smartphones 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.
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 costes de creación y mantenimiento cuando el diseño de las pantallas es similar entre dispositivos de distintos tamaños.
También se supone que evita tener que desarrollar aplicaciones ad-hoc para versiones móviles, por ejemplo, una aplicación específica para iPhone, otra para móviles Android, etc.[5], aunque hoy en día las webs para móviles todavía no pueden realizar las mismas funciones que las aplicaciones nativas.
Desde el punto de vista de la optimización de motores de búsqueda, sólo aparecería una URL en los resultados de búsqueda, con lo cual se ahorran redirecciones y los fallos que se derivan de éstas. También se evitarían errores al acceder al sitio web en concreto desde los llamados "social links", es decir, desde enlaces que los usuarios comparten en medios sociales tales como Facebook, Twitter, etc y que pueden acabar en error dependiendo de qué enlace se copió (desde qué dispositivo se copió) y desde qué dispositivo se accede.[6]
Funcionamiento del Diseño Web Adaptable
El Responsive Web Design se hace posible gracias a la introducción de las Media Queries en las propiedades de los Estilos CCS 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.[7]
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 Tablet (800x600 px) necesitaría sólo 4, y en el caso de un smartphone cuyo ancho suele ser entre 320 px y 480 px las columnas usadas serían 3.
Referencias
- ↑ Diseño Web Adaptable por Ethan Marcote (en español)
- ↑ Artículo sobre Recomendación oficial del consorcio W3C en Arbor Web Solutions (en inglés)
- ↑ Apartado 3.1 OneWeb en la recomendación "Mobile Web Best Practices" del consorcio W3C (en inglés)
- ↑ La misión de W3C (en inglés)
- ↑ Beneficios del Responsive Web Design en ecbloguer.com
- ↑ SEO Benefits of Responsive Web Design (en inglés)
- ↑ Cómo funciona el Responsive Web Design Guía y ejemplos
Enlaces externos
- Oficina española del W3C
- Diseño Web Adaptable por Ethan Marcotte
- Diseño Web Adaptativo, guía y ejemplos