Incrustar una página Web.
Ya mostré en el artículo titulado Incrustar que código debemos utilizar para mostrar un página.
<iframe width="420" height="315" src="http://www.direccionURL.com" frameborder="0" allowfullscreen></iframe>
En el que los valores numéricos corresponden al ancho y alto del marco donde vamos a mostrar la página y lo que está en azul, la dirección de la página que queremos mostrar.
Copiando este código en HTML incrustado… y sustituyendo la dirección por la que nosotros queramos, la mayoría de las páginas serán mostradas en el rotafolios.
Pero también hay un número de páginas que no se muestran, ante esto la solución que encontré es copiar el código fuente de la página y pegarlos en HTML incrustado... Es una solución que no me gusta pero ha solucionado el problema en páginas que no se mostraban. Explico cómo hacerlo en los navegadores Internet Explorer y Mozilla Firefox.
En IE sobre la página, pulsamos el botón secundario del ratón y elegimos en el menú la opción Ver código fuente, en la ventana que se abre, seleccionar todo su contenido, copiarlo y pegarlo en HTML incrustado...
En Firefox sobre la página, pulsamos el botón secundario del ratón y elegimos en el menú la opción Ver código fuente de la página, en la ventana que se abre, seleccionar todo su contenido, copiarlo y pegarlo en HTML incrustado...
Incrustar vídeo YouTube.
Si alguien se pasa por el artículo Incrustar y hace lo que allí está escrito para añadir un vídeo en el rotafolios, se llevará la sorpresa de que no funciona. Las personas que trabajan en Google suelen tener tiempo para enredar con el código y han decidido cambiar el código para incrustar un vídeo.
<iframe width="560" height="315" src="//www.youtube.com/embed/0iOI3qafp9Q" frameborder="0" allowfullscreen></iframe>
Este es el nuevo código, si nos fijamos con el que os mostraba en el artículo, la única diferencia es que falta http: en la dirección del vídeo. Así que después de pegar el código en HTML incrustado… debemos añadir http: en la dirección. Quedaría así:
<iframe width="560" height="315" src="http://www.youtube.com/embed/0iOI3qafp9Q" frameborder="0" allowfullscreen></iframe>
Google Maps.
Aquí viene el gran problema, ninguno de los códigos que nos ofrece Google Maps funciona en ActivInspire, incluso si copiamos el código fuente de la página, lo único que conseguiremos después de un par de minutos de espera, es ver la página sin poder hacer nada en ella. Después de muchas pruebas y finalmente tras una investigación, he dado con la solución. Debemos copiar el siguiente código en HTML incrustado…
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(40.413496, -3.742677),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
En azul tenemos los valores que podemos cambiar, corresponden a la latitud y longitud del mapa. Si se quiere cambiar ese valor, desde Google Maps, elegimos la zona que queremos mostrar y pulsamos sobre el mapa con el botón secundario del ratón y elegimos la opción ¿Qué hay aquí? En la barra de búsqueda de la página aparecerán la latitud y longitud de ese lugar.
Espero que con todo esto os pueda ayudar a mostrar lo que queráis en vuestros rotafolios y que durante un tiempo a nadie se le ocurra inventarse nuevos códigos y volvamos a tener que averiguar cómo resolver los problemas.
