22
Abr

Responsive vs. Adaptive ¿Cuál es la diferencia?

Hoy en día se da por hecho que la práctica totalidad de los desarrolladores de sitios web ya construimos los nuevos sitios completamente adaptados a teléfonos, tabletas, y todo tipo de dispositivos móviles. Pero no muchos años atrás había que hacer especial énfasis en ello, ya que muchos clientes era algo a lo que no le daban importancia, pero que se volvió de especial relevancia al utilizar cada vez más el teléfono para consultar Internet, e ir dejando poco a poco el ordenador al lado, o únicamente utilizado en el entorno laboral y no en el uso más cotidiano.

Fue entonces cuando surgieron dos formas de hacer que cualquier sitio web fuera visionado sin ningún tipo de problema en móviles y tabletas; responsive y adaptive. Pero, ¿qué significa esto?

El diseño responsive (Responsive Web Design, o RWD) se basa principalmente en la utilización de hojas de estilo CSS, que fijan la organización del contenido en función del ancho de pantalla en el que se visualiza.

El diseño adaptive (Adaptive Web Design, o AWD), en cambio, tiene diferentes diseños para cada tamaño de pantalla, y una vez que se detecta el dispositivo en el que se está visualizando (mediante htaccess, javascript, etc), el navegador abrirá el diseño más adecuado para dicho dispositivo.

Sin duda el diseño responsive es más fluido, ya que sólo necesitara un sólo diseño para el sitio web, que se visualizará en función de las hojas de estilo creadas. Mientras que el adaptive necesita de diferentes diseños, y cada vez que abra un nuevo link del sitio necesitará la “detección” del tipo de dispositivo para mostrar la opción correcta.

Por este motivo hoy en día predomina el diseño responsive frente al adaptive, aunque hay que tener en cuenta que hay muchos sitios creados con versiones anticuadas de CMS que son más fáciles de actualizar mediante plugins y addons creando diseños alternativos en adaptive, que pueden ahorrar mucho tiempo al desarrollador y por tanto dinero al cliente.

Siempre es recomendable que tengamos nuestro sitio web actualizado, y con las últimas versiones funcionales del CMS que utilicemos (Oscommerce, Prestashop, Magento, WordPress…). Pero puede darse el caso que la actualización resulte muy complicada al haber ido modificando el código de esas aplicaciones, y no disponer de plugins o addons actualizados que realicen la misma función.

En tal caso ya dependerá de la inversión que quiera realizar cada cliente en su sitio web para que podamos tenérselo completamente actualizado. No obstante, utilizar la versión adaptive nos puede solucionar problemas y eliminarnos dolores de cabeza al tener cualquier sitio web apto para su consulta en dispositivos móviles.

Por eso no podemos calificar ninguna de las dos fórmulas como la mejor, ya que dependerá de cada sitio, cliente y desarrollador.

4
Abr

Incrustar un sitio externo en nuestra web

Hay ocasiones en la que queremos incluir una web externa dentro de nuestro propio sitio, pero a la vez no queremos que los usuarios de nuestra web sepan que esto ocurre, bien sea por cuestión estética, o bien porque por el motivo que sea no queremos que conozcan la dirección de ese sitio ajeno. Cualquier usuario con un poco de conocimiento sobre ello verá fácilmente este pequeño truco, pero para la inmensa mayoría esto pasará inadvertido.

Para ello sólo tendremos que crear un documento en html, e incluir el siguiente código:

<iframe src=”http://www.edicionesdeltajo.com” width=”100%” height=”100%” frameborder=”0″ scrolling=”no”></iframe>

Sólo tendremos que sustituir la url por el sitio web que deseamos incrustar. Pero ojo, que aunque es posible hacerlo con casi todos los sitios, hay algunos (como Google, por ejemplo) que ya están preparados para que no puedan ser anidados en webs externas.

Para que el sitio se ajuste completamente a la pantalla configuraremos width y height al 100%, indicaremos frameborder=”0″ para evitar un antiestético borde, e indicaremos en scrolling=”no” para que no se dupliquen las barras de desplazamiento.

Si la página que hemos incrustado es responsive, funcionará de la misma forma.

Si deseamos que la incrustación tenga un ancho y alto determinado sólo tendremos que modificarlo en width y height, cambiando el % por px.

También debemos tener en cuenta que si nuestro sitio tiene activado https no podremos incrustar páginas que funcionen con http.