¡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

¿Cúal es el origen de los dominios web?

Los dominios y las extensiones de dominio se utilizan desde hace mucho tiempo, incluso antes de la creación de lo que hoy conocemos como internet, existe un motivo por la que no utilizamos simplemente una dirección tipo “http://jedavidart” y ese motivo  tiene mucha...
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

Los mejores sitios de recursos gratis para diseñadores gráficos

Conseguir algún recurso o inspiración  de manera gratuita en la web hoy día no es difícil, conseguir material de calidad... eso si es otra historia. Aquí te recomiendo los que a mi criterio son los mejores sitios de recursos gratis para profesionales del diseño y...
Leer más