¡Compártelo con tus amigos!

Existen varias maneras de integrar las funcionalidades de WordPress con la facilidad de realizar diseños personalizados que tiene muse, pero sin dudarlo la manera más sencilla (al menos en mi opinión) es con un iframe. Un iframe (por inline frame o marco incorporado en inglés) es un elemento HTML que permite insertar o incrustar un documento HTML dentro de un documento HTML principal. Es como hacer una ventana a otra página dentro de una página principal.

Un ejemplo perfecto de esto lo pueden observar en este sitio web que realizó una alumna del diplomado en diseño web que doy en DrGraphic.

Arte Mariño Turmero

Sin mas que agregar les dejo para que copien y peguen el código en muse (Objeto/ Insertar HTML). Recuerden deben reemplazar la dirección del sitio web por la del sitio que ustedes quieran incrustar en muse.

Infografia WordPress + Muse

Código Original (scrolling iFrame)

<div style=’width: 900px; height: 800px; overflow: hidden;’>

<iframe style=’width: 918px; height: 800px;’ src=’http://www.JeDavidDesign.com.ve’ frameBorder=”0″></iframe>

</div>

Código para dispositivos táctiles

<div id=’scroller’ style=’width: 900px; height: 800px; overflow: hidden;’>

<iframe id=’iframe’ style=’width: 918px; height: 800px;’ src=’http://www.JeDavidDesign.com.ve’ frameBorder=”0″></iframe>

</div>

<script type=”text/javascript”>

setTimeout(function () {

var startY = 0;

ar startX = 0;

var b = document.body;

b.addEventListener(‘touchstart’, function (event) {

parent.window.scrollTo(0, 1);

startY = event.targetTouches[0].pageY;

startX = event.targetTouches[0].pageX;

});

b.addEventListener(‘touchmove’, function (event) {

event.preventDefault();

var posy = event.targetTouches[0].pageY;

var h = parent.document.getElementById(“scroller”);

var sty = h.scrollTop;

var posx = event.targetTouches[0].pageX;

var stx = h.scrollLeft;

h.scrollTop = sty – (posy – startY);

h.scrollLeft = stx – (posx – startX);

startY = posy;

startX = posx;

});}, 1000);

</script>

iFrame que ajusta su altura

<script type=”text/javascript”>

function calcHeight()

{

//find the height of the internal page

var the_height=

document.getElementById(‘the_iframe’).contentWindow.

document.body.scrollHeight;

//change the height of the iframe

document.getElementById(‘the_iframe’).height=

the_height;}

</script>

<iframe width=”100%” src=”http://www.JeDavidDesign.com.ve” scrolling=”no” id=”the_iframe” onLoad=”calcHeight();” height=”400px” frameborder=”0″ ></iframe>

También te puede interesar…

Photoshop 26 años de historia

Sin lugar a dudas la herramienta que más utilizo en mi día a día en la oficina y el instituto es Photoshop, ya sea para realizar un boceto rápido o una composición compleja, en mi flujo de trabajo cotidiano siempre uso Photoshop. Es por eso que hoy vengo hablarles un...
Leer más

¿Cuándo usar Dreamweaver, Muse o WordPress para el desarrollo de una web?

¡Compártelo con tus amigos!

Siempre me preguntan cuál es la diferencia entre hacer un sitio web con código, con wordpress o con Adobe Muse. Aquí te cuento cuando usar cada plataforma, y mi recomendación.

Leer más

Tamaños de imágenes para redes sociales en 2017

El ser humano es visual, y en esta generación aún más. Cuando realizamos publicaciones en las redes sociales es sumamente importante cuidar nuestra imagen, no solo del contenido que publicamos sino también de nuestros perfiles sociales, optimizar nuestros perfiles...
Leer más

Tipos de Dominios ¿Cuál es el más recomendado para ti?

En mis clases siempre e tenido que explicar la diferencia entre los diferentes tipos de dominios, y cuál es su importancia. Ya hable en mi anterior entrada sobre el origen de los diferentes tipos de dominio, en esta oportunidad te comentare cual es el mas recomendado...
Leer más