ceros:

ord:

parejas...

Formas de acceder a la aplicación de torneos desde otra web

Hay 3 métodos básicamente:

Van de menor a mayor complejidad (sin que ninguno sea realmente complicado)
Y también de menor a mayor nivel de integración con la web anfitriona
Cualquiera de ellos se puede aplicar en cualquier parte de un blog (en un post o página estática, en alguna barra lateral, en cabecero o pie, etc.), aunque los resultados pueden ser diferentes en cada uno.
¡¡ las URL's que se usan y muestran en los ejemplos no son los definitivos de la aplicación, sino unos temporales utilizados en su actual fase de desarrollo !!

....................................
1) mediante enlaces (links):
Son simples saltos desde la web anfitriona a la de torneos
No existe ninguna integración sino que se cambia de ver una web a ver otra
Se pueden hacer con textos o con imágenes (también se podría con botones)
Se puede añadir el parámetro target="blank" para forzar a que abra otra ventana u otra pestaña además de la de origen, en lugar de presentarla sobre la misma como hace por defecto.

Ejemplo 1a, con texto:
picando aquí cambia a la aplicación de torneos
(se dejará de ver esta página y para volver debe usarse la opción de ventana anterior del navegador)
El código, que puedes copiar y pegarlo donde quieras de tu web:
(la dirección URL no es la definitiva; el texto lo puedes cambiar a tu gusto)

<a href="http://torneosmus.blogspot.com" >picando aquí cambia a la aplicación de torneos</a>

Ejemplo 1b, con texto y ventana/pestaña aparte:
picando aquí la abre en otra ventana/pestaña
(se mantendrá esta página en otra ventana o pestaña, dependiendo del navegador usado, y para volver aquí hay que seleccionar la ventana o pestaña adecuada)
El código, que puedes copiar y pegarlo donde quieras de tu web:
(la dirección URL no es la definitiva; el texto lo puedes cambiar a tu gusto)

<a href="http://torneosmus.blogspot.com" target="blank">picando aquí la abre en otra ventana/pestaña</a>

Ejemplo 1c, con imagen:
picando en la imagen de abajo se salta a aplicación de torneos

El código, que puedes copiar y pegarlo donde quieras de tu web:
(la dirección URL no es la definitiva; la imagen puedes cambiarla a tu gusto)

<a href="http://torneosmus.blogspot.com" target="blank"><img src="http://placeape.com/100/100"></img></a>

.............................
2) mediante iframes:
Es como abrir un agujero en la web anfitriona para ver a través de él la aplicación
Hay un cierto nivel de integración porque la web anfitriona se sigue viendo en todo momento
Pero siguen siendo independientes y cada una tiene su título, barras, formatos, etc.
He puesto en este blog un tipo de letra algo especial para apreciar la diferencia.
El código de la aplicación que ejecuta es el de la web original de torneos.
El tamaño del iframe debe ser suficiente para ver allí la aplicación. Si no lo es, salen barras de desplazamiento para poder ver con ellas los contenidos que se salgan.

Ejemplo 2a, un iframe de 500 x 300:

El código, que puedes copiar y pegarlo donde quieras de tu web:
(la dirección URL no es la definitiva; las dimensiones las puedes cambiar a tu gusto)

<iframe src="http://torneosmus.blogspot.com" width="500" height="300"></iframe>

Ejemplo 2b:
En la barra lateral derecha hay otro ejemplo de iframe con otras dimensiones y donde se ve que se presenta igual que este de aquí aunque allí el fondo sea diferente.
Se puede verificar que las 2 vistas son independientes, cambiando algo en cada una.
El código, que puedes copiar y pegarlo donde quieras de tu web:
(la dirección URL no es la definitiva; las dimensiones las puedes cambiar a tu gusto)

<iframe src="http://torneosmus.blogspot.com" width="250" height="400"></iframe>

.........................................
3) mediante inserción del código:
Ya no se trata de una vista de otra web sino de ejecutar directamente en la web anfitriona el mismo código que se utiliza en la aplicación de torneos
Queda por tanto mucho más integrado al no tener ya ni el título ni las barras de la web original de torneos, y los formatos por defecto que se aplican son los de la web anfitriona. Esto da un aspecto más homogéneo al conjunto (aunque por contra puede presentar problemas de visibilidad de algunos elementos de la aplicación)
El espacio donde se ubique sigue siendo importante que sea suficiente para el contenido de la aplicación, pero en lugar de recortarse y dejar oculta la parte que no quepa, aquí se intenta adaptar a las dimensiones del elemento, lo cual suele dar mejores resultados, aunque si se limitan en exceso puede provocar recortes, deformaciones o descolocaciones de ciertos elementos.

Ejemplos:
Todos usan el mismo código y cambia tan solo la ubicación donde lo presentan, que puedes elegir picando en cada una de sus descripciones:
(igual tienes que desplazar la ventana para ver el efecto)
3a: en la barra derecha
3b: en el pie de página
3c: en un post (en este mismo, al final de todo el texto)
3d: ocultar la aplicacción
Se puede verificar que se mantiene el tipo de letra de este blog y el fondo de la parte en que se inserta.

El código, que puedes copiar y pegarlo en tu web, puede constar ahora de varias partes, que pueden ir juntas o separadas:
A) el código propiamente dicho son 2 líneas, para cargar el CSS y el Javascript necesario:
(las direcciones no son las definitivas)

<style type="text/css" media="screen">@import "https://sites.google.com/site/acmemus/torneos_acme.css"</style>
<script src="https://sites.google.com/site/acmemus/torneos_acme.js"></script>

B) la identificación de la ubicación donde se quiere presentar la aplicación, que no tiene que coincidir con la ubicación del código anterior.

<div id="divppal"></div>

Lo mejor es poner la parte A en un widget bajo el cabecero y la parte B en otro widget o post donde vaya a verse la aplicación.
B2) opcionalmente puede ser necesario un comando para relanzar la aplicación para el caso de que la zona de ubicación no estuviera disponible al cargar la página en cuyo caso no habrá podido presentarla (por ejemplo si va en un post que aún no se ha seleccionado).
En esos casos, hay que añadir otra línea en la parte B para que se inicie la ejecución

<script>iniciar();</script>

Para el caso concreto del blog de musesmas existe el problema de que tanto la zona de posts como las barras son demasiado estrechas para presentar adecuadamente algunas de las vistas de la aplicación de torneos (como pasa también en este blog de ejemplo). Se puede intentar solventar presentándolo bajo el cabecero, pero eso no puede dejarse siempre visible porque dejaría todo el resto del contenido por debajo. Se necesita entonces añadir un mínimo de código adicional para presentar u ocultar la parte de la aplicación de torneos.
Se añade aquí el código completo que sería necesario para este caso y que puede verse en funcionamiento en el cabecero de este mismo blog (si antes has estado probando los casos de arriba, debes picar la opción 4ª de ocultar la aplicación para que pueda funcionar bien la del cabecero)

<script type="text/javascript">
function verocultar() {
var divcabecero = document.getElementById('divcabacero');
var divppal = document.getElementById('divppal');
if (divppal==undefined) divcabecero.innerHTML = '<div id="divppal"></div>';
var verocu = document.getElementById('ver_ocultar');
var divdisp = divcabecero.style.display;
var visto = (divdisp!='none' && divdisp!='');
divcabecero.style.display = (visto)? 'none' : 'inline';
verocu.innerHTML = ((visto)? 'ver' : 'ocultar') + ' la aplicación de torneos ACME';
if (!visto) iniciar();
}
</script>

<style type="text/css" media="screen">@import "https://sites.google.com/site/acmemus/torneos_acme.css"</style>
<script src="https://sites.google.com/site/acmemus/torneos_acme.js"></script>

<style type="text/css">
#ver_ocultar {
/* opciones CSS para la parte de ver/ocultar
por ejemplo un fondo, tipo de letra, color, etc */
background: green;
color: yellow;
border: 2px solid red;
padding: 3px 10px;
margin: 0 0 5px 5px;
}
</style>

<div id="ver_ocultar" onclick="verocultar();">ver la aplicación de torneos ACME</div>
<div id="divcabecero" style="display:noone;"></div>

La parte superior es una nueva función que activa o desactiva la aplicación en el cabecero.
La parte central es el mismo código de carga ya visto anteriormente.
Y la parte final es la de la ubicación algo retocada para incluir la parte de ver/ocultar, cuyo formato puede personalizarse mediante el código que está entre etiquetas style.

............................
Aquí debajo se presentaría la aplicación eligiendo la opción anterior 3c: